无法从菜单项中删除类

Question

我有一个下拉菜单。 在某些页面上，链接只是滚动到锚点而不是刷新页面。 发生这种情况时，下拉菜单应该关闭。但事实并非如此。

这是我的html

<div class="navbar">
    <div class="nav_item">
        <div class="dropdown menu_item" >
            <span class="navbar-submenu"> <a href="/">dropdown</a></span>
            <div class="secondarynav" >
                <div class="nav_item">
                    <div class="menu_item" >
                        <a href="/#">link</a>
                    </div>
                </div>
                <div class="nav_item">
                    <div class="menu_item" >
                        <a href="/#">link</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="nav_item">
        <div class="menu_item" >
            <a href="/">link</a>
        </div>
    </div>
</div>

应该发生的是当访问者点击下拉菜单时，活动类被添加到父 nav_item，然后显示菜单的其余部分。 当用户再次点击下拉菜单时，活动被移除并关闭下拉菜单。

$('.dropdown').click(function (e) {
    $(this).closest('.nav_item').toggleClass('active');
});

现在的问题是，当访问者单击下拉菜单时，我希望删除活动类的任何子链接，目前仅在单击下拉链接时发生。

我尝试了其他各种方法

$('.nav_item.active > *').click(function(e) {
    $(this).closest('.active').removeClass('active');
});

但这与另一个 scipt 中的切换功能存在故障。基本上，主动添加然后立即删除。

如何设置它，以便在单击 .dropdown 时将 .active 添加到父 nav_item。但是，如果单击该菜单中的任何链接， .active 会被删除吗？谢谢

Answer 1

使用e.stopPropagation() 防止项目上的事件冒泡到下拉列表。

$('.nav_item.active > *').click(function(e) {
    e.stopPropagation();
    $(this).closest('.active').removeClass('active');
});