单击另一个 div 时关闭当前切换 div答案

【问题标题】：Close current toggle div when clicked onto another div单击另一个 div 时关闭当前切换 div
【发布时间】：2013-10-15 21:02:33
【问题描述】：

所以现在，我有一个基本的幻灯片和切换脚本，现在在单击时添加了背景。但是，我希望这样，当单击另一个“CLICK ME”时，它会关闭该 div 并打开新的 div。本质上，我不希望切换的 div 不断相互重叠。

http://jsfiddle.net/schermerb/rAMQT/6/

<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>
<div class="toggleBtn">CLICK ME</div>
<div class="below">OH NO IM HIDDEN</div>

.toggleBtn {
    font:14px noral Futura, sans-serif;
    color:black;
    margin:50px;
    cursor:pointer
}
.below {
    background:red;
}
.toggleBtn.active{
    background:blue;   
}

    $(document).ready(function () {
        var content = $('.below').hide();
        $('.toggleBtn').on('click', function () {
            $(this).next('.below').slideToggle();

            $(this).toggleClass('active');
            return false;
        });
        //register the handler to button element inside .below
        $('.below .close').on('click', function () {
            //find the ancestor .below element of the clicked button
            $(this).closest('.below').slideToggle();
        });
    });

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

试试这个方法：

       var $this = $(this);
       $this.next('.below').slideToggle().siblings('.below').slideUp();
       $this.toggleClass('active').siblings('.toggleBtn.active').removeClass('active');

而不是

     $(this).next('.below').slideToggle();

Fiddle

【讨论】：

有没有办法关闭“CLICK ME”的背景呢？如果是这样，那就完美了。
@Blake 哦，是的，当然.. 会更新
是的，完美。谢谢先生。
@Blake 如果你想让其他人向上滑动然后slideToggle这个你可以使用slide的回调..不确定你是否在寻找那个。

【解决方案2】：

使用这个：

var the_others = $('.active').not(this);
the_others.removeClass('active');
the_others.next('.below').slideUp();

Fiddle

【讨论】：