jQuery not：（this）排除類中的所有內容，但上一個函數中調用的除外

Question

嘿，我有一些隱藏的div，它們是通過動態slideToggle函數顯示的。 一切正常，但是當您單擊其他鏈接時，將顯示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（如下所示），但是我認為將它們全部隱藏是一種好方法。

替代方法（更丑陋，更難以維護-如果“ show 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;
});

這里有一個小提琴看它的工作。