javascript - jqueryは一度に1つのdivを切り替えます

Question

私のhtmlページには、トグル機能を持​​つ2つのdivがあります。この js を変更して、他の div が開いているときに他の div を閉じるようにする必要があります

私のjs

jQuery( "div.bk-toggle-header" ).click(function(){
jQuery(this).siblings('div.bk-toggle-content-outer-wrap').animate({
height: 'toggle'
}, 'slow', function() {                 
});
jQuery(this).parents('div.bk-toggle').toggleClass('bk-toggle-closed');
});

私のhtml

    <div class="bk-toggle bk-toggle-closed">
    <div class="bk-toggle-header content-separator">
     <span class="title">First Tab</span>
    <span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap"> content
    </div></div>

    <div class="bk-toggle bk-toggle-closed">
    <div class="bk-toggle-header content-separator">
     <span class="title">Second Tab</span>
    <span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap" > content
    </div></div>

div を 1 つずつ切り替えるための助けをいただければ幸いです。

Answer 1

実際のデモ http://jsfiddle.net/f492H/

以下のソリューションでは、div を 1 つずつ切り替えます。他の Jquery の方法で遊ぶこともできます。is(':visible')

使用する API:

• .slideToggle: http://api.jquery.com/slideToggle/
• .parents: http://api.jquery.com/parents/

それがあなたのニーズに合うことを願っています:)

コード

$('.bk-toggle-content-outer-wrap').hide();
$('.title').on('click', function (e) {
    $('.bk-toggle-content-outer-wrap').hide();
    $(this).parents('.bk-toggle').find('.bk-toggle-content-outer-wrap').slideToggle();
});