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。

我可以详细说明这个答案，并根据要求将其分成小块。如果有人对如何改善这个问题有任何建议或想法，我全都耳熟能详。