简体   繁体   English

切换自动关闭

[英]Toggle auto close

I have the following js code: This code is used on a FAQ toggle page.我有以下 js 代码:此代码用于常见问题切换页面。

It works basically as every toogle code, but I would like to add the auto-close function when clicking to an other question.它基本上与每个工具代码一样工作,但我想在单击其他问题时添加自动关闭功能。

Hide the prev question content, then show the next one.隐藏上一个问题内容,​​然后显示下一个。 Any ideas?有任何想法吗?

if ( 'function' !== typeof(window[ 'vc_toggleBehaviour' ] ) ) {
window.vc_toggleBehaviour = function ( $el ) {
    function event( e ) {
        e && e.preventDefault && e.preventDefault();
        var title = jQuery( this );
        var element = title.closest( '.vc_toggle' );
        var content = element.find( '.vc_toggle_content' );
        if ( element.hasClass( 'vc_toggle_active' ) ) {
            content.slideUp( {
                duration: 300,
                complete: function () {
                    element.removeClass( 'vc_toggle_active' );
                }
            } );
        } else {
            content.slideDown( {
                duration: 300,
                complete: function () {
                    element.addClass( 'vc_toggle_active' );
                }
            } );
        }
    }

    if ( $el ) {
        if ( $el.hasClass( 'vc_toggle_title' ) ) {
            $el.unbind( 'click' ).click( event );
        } else {
            $el.find( ".vc_toggle_title" ).unbind( 'click' ).click( event );
        }
    } else {
        jQuery( ".vc_toggle_title" ).unbind( 'click' ).on( 'click', event );
    }
}
}

Whenever any of the questions are clicked, if you were to hide all active questions you won't have to worry about which one -if any- are currently active.每当单击任何问题时,如果您要隐藏所有活动的问题,您就不必担心当前哪个(如果有)处于活动状态。

(on question click): (问题点击):

$('.vc_toggle_active').each(function(){
    $(this)slideUp( {
        duration: 300,
        complete: function () {
            $(this).removeClass( 'vc_toggle_active' );
        }
    });
});

After sliding up any currently active question, go ahead and show the clicked one.在向上滑动任何当前活动的问题后,继续并显示点击的问题。

NB.注意。 Code not tested, since you have no fiddle and no html.代码未经测试,因为您没有小提琴也没有 html。 Hope you get the concept though.希望你明白这个概念。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM