单击Jquery打开子菜单，并且仍然可以单击子菜单li链接。

jQuery 实现点击打开子菜单并保留子菜单链接功能

基础概念

这个问题涉及使用 jQuery 实现下拉菜单功能，需要同时满足两个需求：

点击父菜单项展开/收起子菜单
子菜单中的链接仍然可以正常点击跳转

解决方案

方法一：阻止事件冒泡

$(document).ready(function() {
    // 点击父菜单项展开/收起子菜单
    $('.menu-item-has-children > a').click(function(e) {
        e.preventDefault(); // 阻止默认行为
        $(this).siblings('.sub-menu').toggle();
    });
    
    // 子菜单项点击时不阻止事件
    $('.sub-menu a').click(function(e) {
        // 这里不需要阻止事件，让链接正常跳转
    });
});

方法二：检查事件目标

$(document).ready(function() {
    $('.menu-item-has-children').click(function(e) {
        // 如果点击的是链接本身且不是子菜单中的链接
        if ($(e.target).is('a') && !$(e.target).parents('.sub-menu').length) {
            e.preventDefault();
            $(this).find('.sub-menu').toggle();
        }
    });
});

方法三：使用 CSS 配合 jQuery

$(document).ready(function() {
    $('.menu-item-has-children > a').click(function(e) {
        // 只有当子菜单隐藏时才阻止默认行为
        if ($(this).siblings('.sub-menu').is(':hidden')) {
            e.preventDefault();
            $(this).siblings('.sub-menu').show();
        }
        // 如果子菜单已显示，则允许链接跳转
    });
    
    // 点击其他地方收起子菜单
    $(document).click(function(e) {
        if (!$(e.target).closest('.menu-item-has-children').length) {
            $('.sub-menu').hide();
        }
    });
});

HTML 结构示例

<ul class="menu">
    <li class="menu-item">
        <a href="/">首页</a>
    </li>
    <li class="menu-item menu-item-has-children">
        <a href="/products">产品</a>
        <ul class="sub-menu">
            <li><a href="/products/phone">手机</a></li>
            <li><a href="/products/computer">电脑</a></li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="/about">关于我们</a>
    </li>
</ul>

CSS 示例

.sub-menu {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
}

.menu-item-has-children {
    position: relative;
}

.menu-item-has-children:hover .sub-menu {
    display: block;
}

常见问题及原因

子菜单链接无法点击：
- 原因：事件冒泡被阻止或父元素的事件处理程序阻止了子元素的点击
- 解决：确保子菜单链接的事件没有被阻止，或者使用方法二检查事件目标

子菜单闪烁或立即关闭：
- 原因：点击事件同时触发了父元素和子元素的事件处理程序
- 解决：使用 e.stopPropagation() 阻止事件冒泡，或者在事件处理中更精确地判断目标元素
移动设备上体验不佳：
- 原因：移动设备没有 hover 状态
- 解决：确保点击事件在移动设备上也能正常工作，可能需要添加触摸事件处理