Question

我有一个简单的jQuery，我用它来切换div的可见性。但是，当一个div被切换时，其他之前切换的div保持打开状态。是否有一种简单的方法来更新此脚本以在其中一个打开时关闭其他div？

jquery的

$(document).ready(function(){
$(".member").click(function(){
    $(this).next(".answer").slideToggle(100);
})
});

CSS

.answer {
    display:none;
}

HTML

<div class="member">
<p>member 1</p>
</div>

<div class="answer">
<p>hidden content</p>

<div class="member">
<p>member 2</p>
</div>

<div class="answer">
<p>hidden content</p>

我不确定最好的办法。我应该将活动类附加到活动div吗？或者有一种更简单的方法可以解决这个问题吗？谢谢！

Answer 1

您可以找到任何其他可见的答案元素（点击的成员元素所针对的答案元素除外）并隐藏它们

$(document).ready(function () {
    var $answers = $('.answer');
    $(".member").click(function () {
        var $ans = $(this).next(".answer").stop(true).slideToggle(100);
        $answers.not($ans).filter(':visible').stop(true).slideUp();
    })
});

演示：Fiddle

Answer 2

易。只需在点击时隐藏所有.answer类，然后只显示点击的那个

$(".member").click(function(){
    $(".answer").hide();
    $(this).next(".answer").slideToggle(100);
})

Answer 3

$(document).ready(function(){
$(".member").click(function(){

    $(".answer").hide();

    $(this).next(".answer").show(100);
})
});

试试上面的

当另一个打开时关闭toggle div - jQuery

3 个答案: