帶有隱藏div的滑動菜單

Question

我有我的網站上使用的簡單導航菜單的所有代碼，它只顯示隱藏的點擊，還檢查點擊是否已經購買另一個按鈕。因爲我不是jQuery的專家，所以我想幫助我提高代碼的效率。

現在它的兩個按鈕顯示一些隱藏的div的相同代碼，我想使它更加統一，如果我添加一個新按鈕，我不必複製和粘貼具有不同ID的相同代碼。

//導航菜單

jQuery(function($){ 
    // Get a reference to the container. 
    var container = $("#servicesSubMenu"); 
    var container2 = $("#productsSubMenu"); 
    // Bind the link to toggle the slide. 
    $("#servicesMenu").click(
      function(event){ 
       // Prevent the default event. 
       event.preventDefault(); 
       // Toggle the slide based on its current 
       // visibility. 
       if (container.is(":visible")){ 
        // Hide - slide up. 
        container.slideUp(1100); 
        jQuery("#servicesMenu").removeClass('current'); 
       } 
       else if (container2.is(":visible")){ 
        // Hide - slide up. 
        container2.slideUp(20); 
        jQuery("#productsMenu").removeClass('current'); 
        container.slideDown(20); 
        jQuery("#servicesMenu").addClass('current'); 
       }      
       else { 
        // Show - slide down. 
        container.slideDown(1100); 
        jQuery("#servicesMenu").addClass('current'); 

       } 
      } 
      ); 
    $("#productsMenu").click(
      function(event){ 
       // Prevent the default event. 
       event.preventDefault(); 
       // Toggle the slide based on its current 
       // visibility. 
       if (container2.is(":visible")){ 
        // Hide - slide up. 
        container2.slideUp(1100); 
        jQuery("#productsMenu").removeClass('current'); 
       } 
       else if (container.is(":visible")){ 
        // Hide - slide up. 
        container.slideUp(20); 
        jQuery("#servicesMenu").removeClass('current'); 
        container2.slideDown(20); 
        jQuery("#productsMenu").addClass('current'); 
       } 
       else { 
        // Show - slide down. 
        container2.slideDown(1100); 
        jQuery("#productsMenu").addClass('current'); 
       } 
      } 
      ); 

}); 

    // end navigation menu 
<nav> 
    <ul id="menu"> 
     <li><a href="#">Company</a></li> 
     <li id="servicesMenu" class="dropDown"><a href="#">Services</a></li> 
     <li id="productsMenu" class="dropDown"><a href="#">Products</a></li> 
     <li><a href="#">Contacts</a></li> 
    </ul> 
</nav> 
<div id="servicesSubMenu" class="slideDown"> 
    <div class="shadow"></div> 
     <ul class="sub-menu"> 
      <li><a href="#">Oil Change</a><a href="#">Powder Coating</a><a href="#">Welding</a></li> 
     <li><a href="#">Installation</a><a href="#">Fender Rolling</a><a href="#">Machining</a></li> 
     </ul> 
    <div class="shadow_botm"></div> 
</div> 
<div id="productsSubMenu" class="slideDown"> 
    <div class="shadow"></div> 
     <ul class="sub-menu"> 
      <li><a href="#">Coilovers</a><a href="#">Exhaust systems</a><a href="#">Rims</a></li> 
     <li><a href="#">Turbo Kits</a><a href="#">Superchargers</a><a href="#">Misc</a></li> 
     </ul> 
    <div class="shadow_botm"></div> 
</div> 

Answer 1

如果你<div>容器相應安排到menu buttons可以使用buttons指數目標相應的容器。

jQuery(function ($) { 
    var containers = $('.slideDown'); 
    var menuBtns = $('.dropDown'); 

    menuBtns.click(function (event) { 
     // Prevent the default event. 
     event.preventDefault(); 
     //get the target container base on the clicked buttons index  
     var targetContainer = containers.eq($(this).index('.dropDown')); 

     //show the target container and add class current 
     targetContainer.slideDown(1100).addClass('current'); 

     //slideUp container that is not the target and remove current class 
     containers.not(targetContainer).slideUp(1100).removeClass('current'); 
    }); 
}); 

演示，請參閱：http://jsfiddle.net/hyTY8/

---

如果你想在容器slideUp當你在同一按鈕上單擊兩次，則可以使用slideToggle()，而不是slideDown()。您也可以使用toggleClass()切換類current。

更新小提琴：http://jsfiddle.net/hyTY8/2/

Answer 2

我會建議使用jQuery庫用於此目的的，所以，你會得到一個乾淨優雅的菜單。看到

http://www.menucool.com/vertical/accordion-menu

http://jqueryui.com/accordion/

您可以使用它們，並根據需求定製。