簡單的菜單選擇和意外冒泡工作

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

    }); 

（我敢肯定，這標記在某種程度上是可怕的，但我只是想獲得一個簡單的原型去）

當菜單打開，我點擊一個子菜單項，父菜單打開/關閉。我認爲問題是事件傳播，但停止傳播和停止ImmediatePropagation不起作用。

這裏有一個小提琴：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/

注意：您可以處理加粗和unbolding與removeClass和addClass，我只是不喜歡改變的CSS。