带有隐藏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/

您可以使用它们，并根据需求定制。