停止关闭悬停时的下拉菜单

时间:2022-05-09 20:33:18

I have a dropdown menu that shows on hover. The menu becomes hidden again after I mouse away from it and I can't click on any of submenus.

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

$('.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();
});

How can I stop closing the dropdown menu if the mouse is hover the dropdown container?

如果鼠标悬停在下拉列表容器中,如何停止关闭下拉菜单?

My jsFiddle Example

我的jsFiddle示例

Any help is greatly appreciated! Thank you so much!

任何帮助是极大的赞赏!非常感谢!

5 个解决方案

#1


2  

The mouseover solution has a slight problem if you hit the menu too quick while it is sliding.

如果您在滑动时快速点击菜单,鼠标悬停解决方案会有一些问题。

Use the li as a parent:

使用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/

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

#2


4  

use mouseover instead of hover

使用鼠标悬停而不是悬停

change

更改

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

to

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

#3


2  

js

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

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/

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

#4


1  

use mouseover and mouseout event to handle this.

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

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

check this http://jsfiddle.net/nkNUz/ use mouseout event to hide according to your logic

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

#5


1  

Actually, what you should do is encapsulate your <li>s in divs with overflow:hidden and your height set that only the "Menu" item showing.

实际上,你应该做的是将你的

  • 封装在具有overflow:hidden的div中,并且你的高度设置为只显示“Menu”项。

  • 封装在具有溢出:隐藏的DIV中,并且你的高度设置为只显示“菜单”项。
  • On hover you should animate your height downward to show all <li>s. You won't need to mouseover or mouseout separately if you are selecting the <div> as your jQuery element.

    在悬停时,您应该向下设置高度动画以显示所有

  • s。如果选择
    作为jQuery元素,则不需要单独鼠标悬停或鼠标移除。

  • s。如果选择作为jQuery元素,则不需要单独鼠标悬停或鼠标移除。
  • #1


    2  

    The mouseover solution has a slight problem if you hit the menu too quick while it is sliding.

    如果您在滑动时快速点击菜单,鼠标悬停解决方案会有一些问题。

    Use the li as a parent:

    使用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/

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

    #2


    4  

    use mouseover instead of hover

    使用鼠标悬停而不是悬停

    change

    更改

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

    to

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

    #3


    2  

    js

    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

    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/

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

    #4


    1  

    use mouseover and mouseout event to handle this.

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

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

    check this http://jsfiddle.net/nkNUz/ use mouseout event to hide according to your logic

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

    #5


    1  

    Actually, what you should do is encapsulate your <li>s in divs with overflow:hidden and your height set that only the "Menu" item showing.

    实际上,你应该做的是将你的

  • 封装在具有overflow:hidden的div中,并且你的高度设置为只显示“Menu”项。

  • 封装在具有溢出:隐藏的DIV中,并且你的高度设置为只显示“菜单”项。
  • On hover you should animate your height downward to show all <li>s. You won't need to mouseover or mouseout separately if you are selecting the <div> as your jQuery element.

    在悬停时,您应该向下设置高度动画以显示所有

  • s。如果选择
    作为jQuery元素,则不需要单独鼠标悬停或鼠标移除。

  • s。如果选择作为jQuery元素,则不需要单独鼠标悬停或鼠标移除。