Question

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

这是导航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>

这是jQuery在点击时将“clicked”类添加到li中，并且在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');
});

mouseout似乎是在mouseenter上发射的

1 个答案: