Question

我有一个在悬停时显示的下拉菜单。在我离开它之后菜单再次隐藏，我无法点击任何子菜单。

$('.toggle-menu').on('hover',function(e){
        e.preventDefault();
        $(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp();
        $(this).toggleClass('show').next().slideToggle();
        e.stopPropagation();
});

如果鼠标悬停在下拉容器上，如何停止关闭下拉菜单？

My jsFiddle Example

非常感谢任何帮助！非常感谢你！

Answer 1

使用鼠标悬停而不是悬停

变化

$('.toggle-menu').on('hover',function(e){

到

$('.toggle-menu').on('mouseover',function(e){

Answer 2

JS

$('.toggle').on('hover',function(e){
        e.preventDefault();
        $(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();
        $(this).find('.toggle-menu').toggleClass('active').next().slideToggle();
        e.stopPropagation();
});

HTML

<ul class="nav">
    <li class="toggle">
        <a href="#" class="toggle-menu"><span></span>MENU 1</a>
        <ul class="menu1">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </li>
    <li class="toggle">
        <a href="#" class="toggle-menu"><span></span>MENU 2</a>
        <ul class="menu2">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
        </ul>
    </li>
</ul>

http://jsfiddle.net/3uLxb/15/

Answer 3

如果在滑动时快速点击菜单，鼠标悬停解决方案会有轻微问题。

使用li作为父母：

$('.toggle-menu-parent').on('hover', function(e){    
        e.preventDefault();

        $(this).siblings().children('.toggle-menu').removeClass('active').next().slideUp();

        $(this).find('.toggle-menu').toggleClass('active').next().slideToggle();

    e.stopPropagation();
});

http://jsfiddle.net/3uLxb/16/

Answer 4

使用 mouseover和mouseout 事件来处理此问题。

$('.toggle-menu').on('mouseover',function(e){...

检查一下 http://jsfiddle.net/nkNUz/ 使用mouseout事件根据你的逻辑隐藏

Answer 5

实际上，您应该做的是将<li>封装在包含overflow:hidden的div中，并将height设置为仅显示“菜单”项目。

在hover上，您animate向下height以显示所有<li>。如果您选择mouseover作为jQuery元素，则无需单独mouseout或<div>。

停止关闭Hover上的下拉菜单

5 个答案: