0

スライドトグル、スライドダウン/アップなどでスライドメニューを作成する練習をしてきましたが、メニューにカーソルを合わせたい場合、これを正しく行うことができないようです。

これまでのところこれはありますが、クリックするだけで機能し、メニュー項目から離れても消えません。そのため、メイン メニュー項目にカーソルを合わせて、ドロップダウンをドロップしたいと思います。どんな助けでも大歓迎です!!

 <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 に答える