Question

我一直在尝试使用slidetoggle，slidingown / up等练习制作滑动菜单，但如果我想将鼠标悬停在菜单上，我似乎无法做到这一点。

到目前为止我已经得到了它，但它只能在点击时工作，并且在离开菜单项后它不会消失。所以我想将鼠标悬停在主菜单项上，然后删除下拉列表。任何帮助表示赞赏!!

 <form id="form1" runat="server">


        <div id="multiDropMenu">
            <ul id="menu">
                <li><a href="#" id="places">Places</a>
                    <ul id="dropdown1">
                        <li><a href="http://google.com">To Go</a></li>
                        <li><a href="#">To See</a></li>
                    </ul>
                </li>
                <li><a href="#">Transportation</a></li>
            </ul>
        </div>

    </form>


    <script type="text/javascript">
        $(document).ready(function() {
            $("#places").toggle(function() { $("#dropdown1").slideDown("fast"); },

                                function() { $("#dropdown1").slideUp("fast"); });


        });

    </script>

Answer 1

您可以在父<li>和.hover()上使用.slideToggle()，因为它是小孩，如下所示：

$(function() {
   $("#places").parent().hover(function() { 
      $("#dropdown1").slideToggle("fast"); 
   });
});

You can give it a try here，这可以让您将鼠标悬停在<li>的任何位置，也可以使它更加通用，如下所示：

 $("#menu li").hover(function() { 
    $(this).find("ul").slideToggle("fast"); 
 });

You can try that version here，对于任意数量的项目都可以效果更好，每个项目都不需要ID。

Answer 2

只需将$("#places").toggle更改为$("#places").hover

即可

在此处查看演示：http://jsfiddle.net/mftWK/

当鼠标离开时，Jquery幻灯片切换下拉列表消失

2 个答案: