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(); 
    } 
});