простой выбор меню и всплывающее неожиданно

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 не работают.

Вот скрипка: ссылка скрипта

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

Ссылка Fiddle: http://jsfiddle.net/hEDjh/14/

Примечание: вы можете обрабатывать выделение и развертывание с помощью removeClass и addClass, я просто не сделалхочется сменить CSS.