予期せず簡単なメニュー選択とバブル動作

Question

ここに私の悩みはありませんか？ :)私は、ulとliで作られた簡単なテキストメニューと、内部にネストされたサブリストを持っています。このデザインでは、トップレベルのアイテムをスライドさせて、含まれているul-liサブメニューを開いたり閉じたりしなければなりません。サブメニュー項目をクリックすると、それらを太字にします。

<ul id="appNavigationMainMenu"> 
    <li id="appOperate" class="selected" > 
     <p id="mainitem1">Operate</p> 
     <ul id="appOperateSubmenu"> 
      <li id="appOperateSub1"> 
       <p>Alerts</p> 
      </li> 
      <li id="appOperateSub2"> 
       <p>Availability</p> 
      </li> 
      <li id="appOperateSub3"> 
       <p>Performance</p> 
      </li> 
      <li id="appOperateSub4"> 
       <p>Reliability</p> 
      </li> 
      <li id="appOperateSub5"> 
       <p>Resource Utilization</p> 
      </li> 
      <li id="appOperateSub6"> 
       <p>Workloads</p> 
      </li> 
     </ul> 
    </li> 
    <li id="appAnalyze" class=""> 
     <p id="mainitem2">Analyze</p> 
     <ul id="appAnalyzeSubmenu"> 
      <li id="appAnalyzeSub1"> 
       <p>AnalyzeSub1</p> 
      </li> 
      <li id="appAnalyzeSub2"> 
       <p>AnalyzeSub2</p> 
      </li> 
     </ul> 
    </li> 

</ul> 

     $(document).ready(function() { 

     //var menuitem = $("#appNavigationMainMenu + li"); 
     var menuitem = $("#appOperate, #appAnalyze"); 

     $(menuitem).click(function (e) { 
      alert(e.target); 
      $(menuitem).removeClass("selected"); 
      $(menuitem).find("ul").slideUp(250); 
      $(this).addClass("selected"); 

      $(this).find("ul").slideToggle(250); 
      e.stopPropagation; 

     }); 

     $("#appOperateSubmenu > li").click(function (e) { 
      $("#appOperateSubmenu > li").removeClass("selected"); 
      $(this).addClass("selected"); 
      e.stopPropagation; 
     }); 

     // start with Operate open 
     $("#appOperate").find("ul").show(); 

    }); 

（。私は、このマークアップは、何らかの方法でひどいです確信しているが、私はちょうど行く簡単なプロトタイプを取得しようとしている）

：

は、ここに私のマークアップとスクリプトですメニューが開き、サブメニュー項目をクリックすると、親メニューが開き/閉じます。私は問題がイベントの伝播だと思うが、stopPropagationとstopImmediatePropagationは機能しません。

ここでフィドルです：fiddle link

Answer 1

私はあなたのマークアップを触れていないが、私はJavaScriptを固定しています。私はそれがあなたが今したいことをやっていると信じています。

$(document).ready(function() { 
//a more specific selector so we don't trigger the menu closing when clicking sub-items   
var menuitem = $("#appNavigationMainMenu li p"); 
//selector for submenus 
var submenuitem = $("#appNavigationMainMenu li ul li"); 

//only need toggle - it handles open and close 
$(menuitem).click(function (e) { 
    //select the next ul under the <p> to expand/contract 
    $(this).next("ul").slideToggle(250); //show 
}); 

$(submenuitem).click(function(e){ 
    //un-bold any lis that are bold "selected" 
    $('#appNavigationMainMenu').find("li").css("font-weight", "normal"); 
    //make our current selection bold 
    $(this).css("font-weight", "bold"); 
}); 

//start with analyze closed, you can change this when you add more sub menus 
$('#appAnalyze ul').hide() 
});​ 

フィドルリンク：http://jsfiddle.net/hEDjh/14/

注：removeClassとaddClassと太字とunboldingを扱うことができ、私はCSSを変更するような気がしませんでした。