javascript - 下拉子菜单选择

Question

我的Javascript

var selectmenu = function(index, sub){
    $('.main-navigation-menu li:nth-child('+index+')').addclass('active');
}

在我看来，有两个 li 标签用于选择主菜单和子菜单；所以由于上面的 JS，它总是选择第一个主菜单和第一个子菜单；即使单击第一个主菜单的第二个子菜单......任何人都知道如何纠正这种行为？在这里，我想使用“sub”变量并执行如下操作:

$('.sub-menu li:nth-child('+index+')').removeClass('active');
$('.sub-menu li:nth-child('+sub+')').addClass('active');

HTML

<ul class="main-navigation-menu ">
    @foreach (var menu in mainmenu) {
        var sublist = userContext.Menus.Where(m => m.Id == menu.Id);
        if (sublist.Count == 0){
            <li class="active open">
                <a href="@Url.Content(menu.MenuUrl)">
                    <span class="title"> @menu.Name </span>
                    <span class="selected"></span>
                </a>
            </li>
        }
        else {
            <li class="main-menu-selection">
                <a href="@menu.MenuUrl">
                    <span class="title">@menu.Name</span>
                    <i class="fa fa-chevron-down pull-right"></i>
                    <span class="selected"></span>
                </a>
                @if (sublist.Count > 0) {
                    <ul class="sub-menu">
                        @foreach (var sub in sublist) {
                            <li class="sub-menu-selection">
                                <a href="@Url.Content(sub.MenuUrl)">
                                    <span class="title"> @sub.Name </span>
                                </a>
                            </li>
                         }
                    </ul>
                }
            </li>
        }
        count++;
    }
</ul>

Answer 1

尝试使用 stopPropagation:

$('.main-navigation-menu').on('click', '.sub-menu-selection', function(e){
  var index;

  e.stopPropagation();

  $('.min-navigation-menu .active').removeClass('active');
  $(e.currentTarget).addClass('active');
});

更多信息 here