javascript - jquery 一次切换一个 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。

Answer 1

工作演示 http://jsfiddle.net/f492H/

下面的解决方案将一次切换一个 div。你也可以尝试其他 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();
});