悬停并滑动jQuery

我是jQuery的初学者，我有这个小问题。我有这个Menu1，当盘旋时，显示SubMenu。我的问题是，当SubMenu滑下来，我徘徊它，它向后滑。我如何编码，以便当我悬停在SubMenu上时，它不会向上滑动？悬停并滑动jQuery

<div id="menu"> 
    <a href="#" id="items">Menu 1</a> 
</div> 

<div id="submenu"> 
    <a href="#">Sub Menu 1</a> 
    <a href="#">Sub Menu 2</a> 
    <a href="#">Sub Menu 3</a> 
</div>

jQuery的：

$(document).ready(function() 
    { 
     $('#menu').hover(
     function() 
     { 
      $('#submenu').slideDown(); 
     }, 
     function() 
     { 
      $('#submenu').slideUp(); 
     }); 
    });

来源

2013-10-10 Ian

您可以在hover功能

改变你的HTML标记和巢菜单里面的HTML子菜单，TAHN使用 slideToggle

HTML：

个

<div id="menu"> 
    <a href="#" id="items">Menu 1</a> 
    <div id="submenu" style="display: none"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     <a href="#">Sub Menu 3</a> 
    </div> 
</div>

JS：

$(document).ready(function() { 
    $('#menu').hover(function() { 
     $('#submenu').slideToggle(); 
    }); 
});

演示：http://jsfiddle.net/DH5Lw/

来源

2013-10-10 07:03:06

它作品！谢谢！ – Ian

希望它可以帮助

$(document).ready(function() 
    { 
    $('#submenu').hide(); 
    $('#menu').hover(
    function() 
    { 
     $('#submenu').slideDown(); 
    }); 
    $('#submenu').mouseout(function(){ 
     $('#submenu').slideUp(); 
    }); 
    });

来源

2013-10-10 06:55:36

HTML的添加额外的包装的div

<div id="holderDiv"> 
    <div id="menu"> 
     <a href="#" id="items">Menu 1</a> 
    </div> 
    <div id="submenu"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     <a href="#">Sub Menu 3</a> 
    </div> 
    </div>

JQuery-

$("#submenu").hide(); 
    $("#menu").on('mouseover', function() { 
     $("#submenu").slideDown(500); 
    }); 

    $("#holderDiv").on('mouseleave', function() { 
      $("#submenu").slideUp(500); 
    });

DEMO

来源

2013-10-10 07:03:38

这是你的问题。当您将鼠标悬停在子菜单中时，此操作类似于菜单1上的悬停事件，因此子菜单向上滑动。所以要防止这种情况，你可以做的是把菜单DIV中的子菜单的div如下：

<div id="menu"> 
    <a href="#" id="items">Menu 1</a> 
    <div id="submenu"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     <a href="#">Sub Menu 3</a> 
    </div> 
</div>

还隐藏子起初如下：

$('#submenu').hide(); 
$('#menu').hover(
    function() { 
     $('#submenu').slideDown(); 
    }, 
    function() { 
     $('#submenu').slideUp(); 
    } 
);

工作演示：http://jsfiddle.net/YUhWd/

来源

2013-10-10 07:13:59 sonam

悬停并滑动jQuery

回答

相关问题