jQuery无序列表幻灯片菜单

Question

我想模仿依赖选择列表使用无序列表和jQuery，所以我可以样式我的列表我想如何，因为我不能样式选择列表。

我遇到的问题是，如果第二个菜单是打开的，我点击第一个菜单，我需要第二个菜单关闭前打开第一个。

这是我认为正在解决问题的那一点。

if($("#next_menu").is(':visible')) { 
    $("#next_menu").slideToggle(200); 
} 

另外，有没有一种方法可以改善代码，使其像链接事件一样更高效？我已经看到人们只用几行代码来做代码，并不知道这是否可能与我所拥有的一样。

JQUERY

$(document).ready(function() { 
    // hide the menu on page load 
    $('#current_menu').hide(); 
    // hide each of the linked menus on page load 
    $('#next_menu > ul').each(function() { 
     $(this).hide(); 
    }); 

    $("#current_page").click(function() { 

     if($("#next_menu").is(':visible')) { 
      $("#next_menu").slideToggle(200); 
     } 
     // slide up/down the first menu 
     $("#current_menu").slideToggle(200); 
    }); 

    $("#current_menu li").click(function(event) { 
     // set the text of div to what was clicked 
     $("#current_page").html($(this).text()); 

     // get the id if the clicked <li> 
     var id = $(this).attr('id'); 

     //slide up the first menu 
     $("#current_menu").slideToggle(200, function() { 

      $("ul." + id).show(); 
     }); 
    }); 
}); 

HTML

<div class="aaa"> 
    <div id="current_page">Default Value</div> 
    <div id="current_menu"> 
     <ul> 
     <li id="a"><a href="#">Option A</a></li> 
     <li id="b"><a href="#">Option B</a></li> 
     <li id="c"><a href="#">Option C</a></li> 
     </ul> 
    </div> 
</div> 
<div class="aaa"> 
    <div id="next_page">Default Value</div> 
    <div id="next_menu"> 
     <ul class="a"> 
      <li>Lipsum</li> 
      <li>Lipsum</li> 
      <li>Lipsum</li> 
     <ul></ul> 
     <ul class="b"> 
      <li>Lipsum</li> 
      <li>Lipsum</li> 
      <li>Lipsum</li> 
     </ul> 
     <ul class="c"> 
      <li>Lipsum</li> 
      <li>Lipsum</li> 
      <li>Lipsum</li> 
     </ul> 
    </div> 
</div> 

Answer 1

在菜单中添加同一类像.menus

$('.menus').click(function(){ 
    if(!$(this).is(':visible'){ 
    $('.menus').hide(); 
    $(this).show(); 
    } 
});