jquery：在li元素下找到div

Question

我试图开发一个可折叠的菜单，所以当用户点击一个选项时，会显示相关的内容，如果再次点击，它只是“关闭它”。我试过.closest（）或.next（），但它们似乎不起作用，我向元素添加了类，以知道哪个元素被选择或扩展，哪些不是。这是我得到了什么，任何帮助，将不胜感激，谢谢

<ul id="menu"> 
       <li class="menu_item"><a href="content.html">Dosing Options</a> <a href="/index.html" class="home"></a></li> 
       <div class="data selected"><!--#include virtual="includes/landing_pages/dosing.html" --></div> 
       <li class="menu_item"><a href="content.html">Efficacy Data</a></li> 
       <div class="data"><!--#include virtual="/includes/landing_pages/efficacy.html" --></div> 
       <li class="menu_item"><a href="content.html">Stability</a></li> 
       <div class="data"><!--#include virtual="/includeslanding_pages/stability.html" --></div> 
      </ul> 

的Jquery：

if(!($(this).children("div:first").hasClass("selected"))){ 
    $(this).addClass("active"); 
    $(this).parent().addClass("selected"); 
    $(this).parent().children(".data:first").slideDown("fast"); 
}else{ 
    $(this).removeClass("active"); 
    $(".menu_item.selected").next("div").slideUp("fast"); 
    $(this).parent().removeClass("selected"); 


} 

Answer 1

没有必要把它复杂化，只是使用jQuery的切换方法：

DEMO：http://jsfiddle.net/CMzuv/1/

$('li a').click(function(e) { 
    $(this).parent().next().slideToggle(); 
    e.preventDefault(); 
});