jQuery擴展菜單錯誤

Question

我已經編碼了一個導航菜單，其中嵌套下拉菜單 - 我已經編寫了菜單，在懸停時滑動並且工作正常。

但是，還有一個'顯示所有'鏈接，點擊時會展開所有子菜單並將新類應用於容器以便將菜單填充。

單擊可以擴大菜單的範圍，但第二次點擊會改變外觀，因爲它應該在一瞬間改變外觀，方法是刪除類，就好像它再次觸發該功能一樣。我的代碼如下 - 任何幫助將不勝感激！安迪

// == MENU SHOW ALL TOGGLE 
// show pointer 
$('#menu li#show-all').hover(function(){ 
    $(this).css({'cursor' : 'pointer'}); 
}); 
$('#menu-container').addClass('show-single'); 

function toggleheight(){ 
    if ($('#menu-container').hasClass('show-single')) { 
     $('#menu li').not('#show-all').fadeOut(function(){ 

      $('#menu').animate({ 
       height : '300px' 
      }, function(){ 
       $('#menu-container').removeClass('show-single').addClass('show-all'); 
       $('#menu li').not('#show-all').fadeIn(); 
      }); 
     }); 
    }else { 
     $('#menu li').not('#show-all').fadeOut(function(){ 
      $('#menu-container').removeClass('show-all').addClass('show-single'); 
      $('#menu').animate({ 
       height : '16px' 
      }, function(){ 
       $('#menu li').not('#show-all').fadeIn(); 
      }); 

     }); 
    } 
} 

$('#menu li#show-all').click(function(){ 
     $(toggleheight); 
}); 

編輯：擴展菜單，盤旋一個鏈接，然後搬回並單擊顯示所有的鏈接確實恢復菜單，因爲它應該 - 但點擊「顯示所有」鏈接，一旦擴大再次萎縮沒有導航離開似乎重新觸發功能

Answer 1

我決定不挖掘你的代碼，並試圖解決它，因爲我認爲有一個更好的方法來建立導航菜單，一個簡單的jQuery插件。然而，這並不能真正幫助你解決你的代碼問題，但希望你會發現這個有用。

所以，這就是我想出的。

HTML：

<ul class="nav-menu"> 
    <li> 
     <a href="#">Menu 1</a> 
     <ul> 
      <li><a href="#">Submenu 1</a></li> 
      <li><a href="#">Submenu 2</a> 
       <ul> 
        <li><a href="#">Subsubmenu 1</a></li> 
        <li><a href="#">Subsubmenu 2</a></li> 
        <li><a href="#">Subsubmenu 3</a></li> 
        <li><a href="#">Subsubmenu 4</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Submenu 3</a></li> 
      <li><a href="#">Submenu 4</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Menu 2</a> 
     <ul> 
      <li><a href="#">Submenu 1</a></li> 
      <li><a href="#">Submenu 2</a></li> 
      <li><a href="#">Submenu 3</a></li> 
      <li><a href="#">Submenu 4</a></li> 
     </ul> 
    </li> 
</ul> 

插件代碼：

(function($){ 

    function traverseItems($items) { 
     $items.each(function(){ 
      var $item = $(this), 
       $submenu = $item.children("ul").hide(); 
      if ($submenu.length) { 
       $item.children("a").click(function(){ 
        $submenu.toggle(); 
        return false; 
       }).append(" \>"); 
       traverseItems($submenu.children("li")); 
      } 
     }); 
    } 

    $.fn.navMenu = function (options){ 
     var defaults = { 
      showAllToggle: true 
     }; 
     options = $.extend({}, defaults, options); 

     return this.each(function(){ 
      var $this = $(this) 
        .addClass("nav-menu"), 
       $items = $this.children("li"); 

      traverseItems($items); 

      if (options.showAllToggle) { 
       $showAll = $("<a></a>") 
        .attr("href", "#") 
        .addClass("show-all") 
        .text("Toggle all") 
        .toggle(function(){ 
         $this.find("ul").show(); 
         return false; 
        }, function(){ 
         $this.find("ul").hide(); 
         return false; 
        }) 
        .wrap("<li></li>") 
        .parent() 
        .prependTo($this); 
      } 
     }); 
    }; 

})(jQuery); 

用法：

$(function(){ 
    $(".nav-menu").navMenu(); 
}); 

你可以看到這一切在行動Ø n jsFiddle。

我可以詳細說明這個答案，並根據要求將其分成小塊。如果有人對如何改善這個問題有任何建議或想法，我全都耳熟能詳。