jQuery不是：（this）排除除了前一個函數調用的類之外​​的所有內容

Question

Hey all， 我有一些通過動態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

這是你在找什麼？

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

這是fiddle看它的工作。

Answer 2

，我正編寫一個隱藏所有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（如下所示），但我認爲隱藏它們都是一個好方法。

替代，（醜陋，少維護的 - 也需要邏輯跳過的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 3

The accordion control from jQuery UI似乎將你在找什麼。