Question

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

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

Answer 1

您可以更改HTML标记并在菜单中嵌套HTML子菜单，在slideToggle函数中使用hover

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/

Answer 2

希望有所帮助

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

Answer 3

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

Answer 4

这是你的问题。当您将鼠标悬停在子菜单中时，此操作类似于菜单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/

在jQuery中悬停和滑动

4 个答案: