如何修改jQuery子菜单切换代码，保留子菜单链接可用性？

问题描述 #

实现子菜单切换功能时，切换效果正常，但父级链接被禁用（符合预期），但子菜单的链接也被禁用了（不符合需求），需要修改代码让子菜单链接保持可点击状态。

原实现代码 #

JavaScript代码

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

菜单HTML结构

<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>

问题原因 #

原代码给整个.menu-item-has-children元素（父级li）绑定了点击事件，并且通过return false同时阻止了事件冒泡和元素默认行为。当点击子菜单的a标签时，事件会冒泡到父级li，触发return false，从而阻止了子链接的跳转行为。

修复代码 #

jQuery(document).ready(function () {
    jQuery('#menubar ul.sub-menu').hide();
    if (jQuery('.menu-item-has-children').length > 0) {
        // 仅给父级li下的直接a标签绑定点击事件
        jQuery('.menu-item-has-children > a').click(function (event) {
            // 仅阻止父级a标签的默认跳转行为，不影响子元素
            event.preventDefault();
            // 切换父级li的toggled类，同时切换子菜单显示状态
            jQuery(this).parent().toggleClass('toggled').children('ul.sub-menu').toggle();
        });
    }
});

修复说明 #

• 缩小事件绑定范围：将点击事件绑定到父级li的直接子元素a标签上，而非整个li，这样点击子菜单的a标签时不会触发该切换事件。
• 精准阻止默认行为：使用event.preventDefault()代替return false，仅阻止父级a标签的跳转，不会影响子链接的默认行为。
• 简化逻辑：用toggleClass('toggled')替代重复添加类的操作，同时链式调用toggle()切换子菜单显示，代码更简洁高效。

内容的提问来源于stack exchange，提问作者Ray