简单的菜单选择和意外冒泡工作

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。