0

我一直在尝试用slidetoggle、slidedown/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>
4

2 回答 2

1

你可以.hover()在父母身上使用<li>.slideToggle()因为它是一个孩子,像这样:

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

你可以在这里试一试,这可以让你在任何地方悬停<li>,你也可以让它更通用,像这样:

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

您可以在此处尝试该版本,它适用于任意数量的项目,每个项目都不需要 ID。

于 2010-08-17T16:04:32.357 回答
0

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

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

于 2010-08-17T16:03:47.380 回答