jQuery 切换功能停止消失子项目

Question

我有这样的代码：

<div class="row menu-container">
    <div class="col-lg-4 col-sm-10">
        <h4 class="menu-title">Item<span class="menu-bold">1</span></h4>
        <ul id="menu-1" class="menu">
            <li id="menu-item-222"><span>Subitem1</span></li>
            <li id="menu-item-223"><span>Subitem2</span></li>
            <li id="menu-item-224"><span>Subitem3</span></li>
        </ul>
    </div>
    <div class="col-lg-4 col-sm-10">
        <h4 class="menu-title">Item<span class="menu-bold">2</span></h4>
        <ul id="menu-2" class="menu">
            <li id="menu-item-237"><span>Subitem1</span></li>
            <li id="menu-item-239"><span>Subitem2</span></li>
            <li id="menu-item-241"><span>Subitem3</span></li>
        </ul>
    </div>
</div>

$("h4.menu-title").mouseenter(function() {
    $(this).siblings("ul").toggle();
}).mouseleave(function() {
    $(this).siblings("ul").toggle();
});

我想用鼠标输入 Item 1 然后显示子项，但是当我想浏览子项时它们就消失了。当我在他们身上时，是否可以让它保持显示状态？

完整示例：https://jsfiddle.net/pfjsxj58/

Answer 1

问题是因为当您将 h4 留给 select ul 中的一个选项时，会调用 mouseout。相反，将事件附加到包含 h4 和 ul 的父 div 元素：

<div class="col-lg-4 col-sm-10 item-group">
    <h4 class="menu-title">Item<span class="menu-bold">1</span></h4>
    <ul id="menu-1" class="menu">
        <li id="menu-item-222"><span>Subitem1</span></li>
        <li id="menu-item-223"><span>Subitem2</span></li>
        <li id="menu-item-224"><span>Subitem3</span></li>
    </ul>
</div> 
<div class="col-lg-4 col-sm-10 item-group">
    <h4 class="menu-title">Item<span class="menu-bold">2</span></h4>
    <ul id="menu-2" class="menu">
        <li id="menu-item-237"><span>Subitem1</span></li>
        <li id="menu-item-239"><span>Subitem2</span></li>
        <li id="menu-item-241"><span>Subitem3</span></li>
    </ul>
</div>

$(".item-group").mouseenter(function() {
    $(this).find("ul").toggle();
}).mouseleave(function() {
    $(this).find("ul").toggle();
});

Updated fiddle

Answer 2

是的，您可以，您必须修改 HTML 并使项目的子项目显示您的选项。这样，您的元素保持焦点，您可以点击子项目

jQuery 切换功能停止消失子项目

jQuery toggle function stop disappear subitems

javascript

jquery

toggle