jquery - mouseout 似乎在 mouseenter 上触发

Question

这是一个导航菜单，带有包含子页面的大下拉菜单。下拉菜单应仅在单击主导航 li 时出现，然后在将 li 和/或 .subNav div 留在 li 内时隐藏。它应该在单击时显示，但是一旦我尝试输入 .subNav div，整个下拉列表就会再次隐藏（“单击”类被删除）。

这是导航 li 的 HTML 及其 .subNav 下拉列表：

<li><a class="more">MORE</a>
    <div class="subNav more">

        <div class="subNavGroup">
            <h4>Sub Group 1</h4>
            <ul>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
            </ul>
        </div><!-- .subNavGroup -->

        <div class="subNavGroup">
            <h4>Sub Group 2</h4>
            <ul>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
            </ul>
        </div><!-- .subNavGroup -->

        <div class="subNavGroup">
            <h4>Sub Group 3</h4>
            <ul>
                <li><a href="#">This Thing vs That There</a></li>
            </ul>
        </div><!-- .subNavGroup -->


    </div><!-- .subNav -->
</li>

这是在单击时将“单击”类添加到 li 的 jQuery，并且应该在 mouseout 之前不会将其删除，而是在 mouseenter 上进行。

// make the drop down menus appear on click and dissapear on mouse out
$('.mainNav2 li').live('click', function() {
    $(this).addClass('clicked');
});

$('li.clicked').live('mouseout', function(){
    $('li.clicked').removeClass('clicked');
});

Answer 1

这解决了它。不知道为什么原来的不起作用（可能是事件冒泡或其他东西）。

// make the drop down menus appear on click and dissapear on mouse out
$('.mainNav2 li').live('click', function() {
    $(this).addClass('clicked');
});

$('.mainNav2 > li').mouseleave(function(){
    $('li.clicked').removeClass('clicked');
});