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

EDIT： - しかし縮小するもう一度展開して一度「すべて表示」リンクをクリックすると、それがなければならないとして、すべてのリンクをバックに移動し、ショーをクリックし、リンクをホバリング、メニューを展開してメニューを元に戻すんナビゲーションを外さずに関数を再トリガーするように見える

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

あなたは、アクション0でそれをすべてを見ることができますn jsFiddle。

私はこの回答を詳しく説明し、要請があればそれを切り分けることができます。これがどのように改善できるかについて誰かが提案やアイディアを持っているなら、私はすべて耳にします。