javascript - jQuery not: (this) 排除一个类中的所有内容，除了在前一个函数中调用的那个

Question

大家好，我有一些通过动态 slideToggle 函数显示的隐藏 div。一切都很好，但是当您单击其他链接时，会显示 div。我希望一次显示一个 div。单击隐藏其他并显示新的。看来我永远无法正确获得完整的功能！

感谢您的时间！我非常感激。这里只是一个小宝贝。

HTML：

    <div id="nav">
        <div class="menu"><a id="show_work">WORK</a></div>
            <div id="work" class="sub">
                <p>hidden content</p>
            </div>
        <div class="menu"><a id="show_biography">BIO</a></div>
            <div id="biography" class="sub" >
                <p>hidden content</p>
            </div>
        <div class="menu"><a id="show_contact">CONTACT</a></div>
            <div id="contact" class="sub">
                <p>hidden content</p>
            </div>
     </div>

Javascript 可以工作，但让它们全部打开：

$('#work, #biography, #contact').hide();
$('#nav .menu').click(function() {
    $(this).next().slideToggle(400);
    return false;
}).next().hide();

我想要的概念性Javascript：

$('#work, #biography, #contact').hide();
$('#nav .menu').click(function() {
    $(this).slideToggle(400);
    $('.sub not:(this)').slideUp(400);
});
return false;
});.next().hide();

Answer 1

我只是编写一个函数，在任何点击时隐藏所有 div：

function hideDivs() {
  $(".menu div").hide();
}

然后你的点击看起来像这样：

$('#show_work').click(function() {
    hideDivs();
    $('#work').slideToggle(400);
});

$('#show_biography').click(function() {
    hideDivs();
    $('#biography').slideToggle(400);
});

$('#show_contact').click(function() {
    hideDivs();
    $('#contact').slideToggle(400);
});

无论点击什么链接，这都是通过隐藏所有 div 来实现的。您可以手动隐藏非目标 div（如下所示），但我认为将它们全部隐藏是一个好方法。

替代方案，（更丑陋且不易维护 - 如果“显示 div”已经可见，还需要逻辑来跳过 slideToggle 调用）：

$('#show_work').click(function() {
    $('#show_biography, #show_contact').hide();
    $('#work').slideToggle(400);
});

$('#show_biography').click(function() {
    $('#show_work, #show_contact').hide();
    $('#biography').slideToggle(400);
});

$('#show_contact').click(function() {
    $('#show_work, #show_biography').hide();
    $('#contact').slideToggle(400);
});

Answer 2

来自 jQuery UI 的手风琴控件似乎可以满足您的需求。

Answer 3

这是你要找的吗？

$('.sub').hide();
$('#nav .menu').click(function() {
    $('.sub:visible').not($(this).next()).slideUp(400);
    $(this).next().slideToggle(400);
    return false;
});

这是一个观看它工作的小提琴。