切换子菜单的Javascript也禁用子菜单链接

Question

我使用下面的代码来切换子菜单。切换效果很好，但它会禁用父链接（一件好事）和子菜单链接（绝对不是一件好事）。

我需要如何处理这段代码才能使子菜单链接保持启用状态？

jQuery(document).ready(function () {
   jQuery('#menubar ul.sub-menu').hide();
    if (jQuery('.menu-item-has-children').length > 0) {
        jQuery('.menu-item-has-children').click(
        function (event) {
            jQuery(this).addClass('toggled')
            if (jQuery(this).hasClass('toggled')) {
                jQuery(this).children('ul').toggle();
            }
            return false;
        });
    }
});

这是菜单结构：

<nav id-"menubar">
    <div class="menu-header">
        <ul id="nav" class="menu">
            <li class="menu-item"><a href="/">Home</a></li>
            <li class="menu-item menu-item-has-children">
                <a href="#">Page 2</a>
                <ul class="sub-menu">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">c</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Answer 1

您的代码的问题在于 return false;点击事件中的声明。这有效地防止了任何默认操作和事件冒泡，这也会禁用子菜单链接。要解决此问题，您可以修改代码，以便只有父链接（带有子菜单的链接）受到切换行为的影响，同时允许子菜单链接保持可点击状态。

所以你应该这样做：

jQuery(document).ready(function () {
   jQuery('#menubar ul.sub-menu').hide();
   
    if (jQuery('.menu-item-has-children').length > 0) {
        jQuery('.menu-item-has-children > a').click(function (event) {
            event.preventDefault(); // Prevent default behavior only for parent link
            jQuery(this).siblings('ul').toggle(); // Toggle the sub-menu
        });
    }
});