1

我有一个悬停时显示的下拉菜单。鼠标移开后,菜单再次隐藏,无法单击任何子菜单。

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

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

我的 jsFiddle 示例

任何帮助是极大的赞赏!太感谢了!

4

5 回答 5

4

使用鼠标悬停而不是悬停

改变

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

$('.toggle-menu').on('mouseover',function(e){
于 2013-09-10T14:18:05.033 回答
3

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/

于 2013-09-10T14:26:23.477 回答
2

如果您在滑动时过快地点击菜单,则鼠标悬停解决方案会出现小问题。

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

于 2013-09-10T14:32:44.773 回答
1

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

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

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

于 2013-09-10T14:20:10.073 回答
1

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

在你hover应该向下显示所有s。如果您选择jQuery 元素,则不需要或单独这样做。animateheight<li>mouseovermouseout<div>

于 2013-09-10T14:26:12.463 回答