Question

这是我当天的noob问题。 :)我有一个由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处理粗体和解除绑定，我只是不想改变css。

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

1 个答案: