0

メニュー項目を表示するために切り替えると上下にスライドするドロップダウンメニューがあります。問題は、メニューが下にスライドした後にメニュー項目の1つをクリックすると、それがトグルとして認識され、メニュー項目のリンクを開かずにメニューが上にスライドすることです。

HTML

<li class="dropdown">
            <a href="#">Carbohydrates, proteins &amp; fats</a>
            <ul>
                <li><a href="carbohydrates.php">Carbohydrates</a></li>
                <li><a href="proteins.php">Proteins</a></li>
                <li><a href="fats.php">Fats</a></li>
            </ul>
        </li>

ドロップダウンスクリプト：

$(document).ready(function () {
    $('.dropdown').toggle(
        function () {
            //show its submenu
            $('ul', this).slideDown(300);
        },
        function () {
            //hide its submenu
            $('ul', this).slideUp(300);        
        }
    );

});

これについて助けていただければ幸いです。

4

3 に答える 3

0

ドロップダウンアイテムの外にトリガーリンクを移動してみてください

<a href="#" class="dropdown">Carbohydrates, proteins &amp; fats</a>
<div class="divdropdown">
   <ul>
       <li><a href="carbohydrates.php">Carbohydrates</a></li>
       <li><a href="proteins.php">Proteins</a></li>
       <li><a href="fats.php">Fats</a></li>
   </ul>
</div>​

そして、jqueryを少し変更します

$(document).ready(function () {
    $('.dropdown').toggle(
        function () {
            //show its submenu
            $('ul', $(".divdropdown")).slideDown(300);
        },
        function () {
            //hide its submenu
            $('ul', $(".divdropdown")).slideUp(300);        
        }
    );
});​
于 2012-07-29T21:58:18.647 に答える
0

メニュー項目を個別に開閉するのはなぜですか？親<li>要素が非表示になると、とにかくすべてが非表示になります-その後、なぜ何かをするのですか？

イベントバブリングを無効にしたいと思います。

編集1：あなたは物事を複雑にしすぎています。これを試して：

$(document).ready(function () {
    $('.dropdown').toggle();
});

編集2：あなたはあなたが欲しいものについてより具体的にすることができますか？特定の要素をクリックしたときに特定のリストの動きを制御したい場合は、次のことを試してください。

$(document).ready(function () {
    $('a.someLink').click(function() {
       $('.dropdown').toggle();
    });
});
于 2012-07-29T21:52:26.847 に答える
0

残念ながら、上記の答えはどれも私にはうまくいきませんでした。その後すぐに解決策を見つけました。

HTML

<li class="dropdown">
            <a class="disablelink" href="#">Carbohydrates, proteins &amp; fats</a>
            <ul class="sub_navigation">
                <li><a href="carbohydrates.php">Carbohydrates</a></li>
                <li><a href="proteins.php">Proteins</a></li>
                <li><a href="fats.php">Fats</a></li>
            </ul>
        </li>

jqueryスクリプト

$(document).ready(function() {
        $('.dropdown').click(function() {
                        // When the event is triggered, grab the current element 'this' and
                        // find it's children '.sub_navigation' and display/hide them
            $(this).find('.sub_navigation').slideToggle(); 
        });

        $(".disablelink").click(function(e) {
            e.preventDefault();
        });

    });

その解決策は私にとって完璧に機能しています。e.preventDefault();リンクをクリックしたときにページが上下にジャンプするのを防ぐために追加しました。

于 2012-07-30T13:14:46.090 に答える