使用 javascript 将活动类添加到主菜单

我已经搜索了很多使用添加活动类到父菜单javascript.

我发现了更多示例，但没有一个适合我，下面是我的代码

HTML

<div id="menu1" class="hmenu">
    <ul>
        <li><a href="#">Item1</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
                <li><a href="#">SubItem2</a> </li>
                <li><a href="#">SubItem3</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <br style="clear: left" />
</div>

我的要求是当我点击SubItem1然后两个Item1 and SubItem1应该是活跃的。

当我点击子子项目1 then 子子项目1 ,SubItem1 and Item1应该是活跃的。

意味着当单击任何链接时，其所有父链接和同一链接都应处于活动状态。

我试过这个javascript code :

$(document).ready(function () {
        $('.hmenu ul li ul').find('li').click(function () {
            //removing the previous selected menu state
            $('.hmenu').find('li.active').removeClass('active');
            //adding the state for this parent menu
            $(this).parents('li').addClass('active');
        });
    });

实际上我没有任何经验javascript编码并无法找出我的问题code.

任何人都可以建议我同样的事情吗？

问题来自于.find('li').click().

当您使用嵌套时<li>，这将导致当您单击子项时该事件被触发两次<li>。这会导致问题。你不能添加click() to <a>元素？

$(document).ready(function () {
    $('.hmenu a').click(function () {
        //removing the previous selected menu state
        $('.hmenu').find('li.active').removeClass('active');
        //adding the state for this parent menu
        $(this).parents("li").addClass('active');

    });
});

它工作得很好：https://jsfiddle.net/6put8tdx/ https://jsfiddle.net/6put8tdx/

请注意，点击时您的页面将跳至顶部a选项卡因为#锚。如果你想防止这种情况，你可以将事件传递给函数.click(function (event) {...}并添加event.preventDefault inside.