1

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

4 回答 4

2

您可以更改 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/

于 2013-10-10T07:03:06.933 回答
0

希望能帮助到你 

 $(document).ready(function()
    {
    $('#submenu').hide();
    $('#menu').hover(
    function()
    { 
        $('#submenu').slideDown();
    } );
    $('#submenu').mouseout(function(){
         $('#submenu').slideUp();
    });   
    });
于 2013-10-10T06:55:36.847 回答
0

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

演示

于 2013-10-10T07:03:38.293 回答
0

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