1

メガドロップダウンナビゲーションバーを構築しようとしています。Jquery は私の長所ではありませんが、探しているものを達成するために使用する必要があります。同様の質問に関するさまざまなトピックを認識していますが、探しているものとまったく同じものはありませんでした（私はJQueryのプロではなく、サイトのこの小さな部分にしか使用しないことを思い出してください）。

これまでのところ、私はこのHTMLレイアウトを持っています:

<div class = "header-wrapper">
            <div class = "header">
                <ul id = "navbar">
                    <li class = "toggle">Navbar Option 1
                        <ul class = "dropdown">
                            <li class = "dropdown-inner">
                                Dropdown 1
                            </li>
                        </ul>
                    </li>
                    <li class = "toggle">Navbar Option 2
                        <ul class = "dropdown">
                            <li class = "dropdown-inner test">
                                Dropdown 2
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>

これは私のJQueryです：

<script type="text/javascript">
            window.onload = function(){
                var $dd = $(".dropdown");

                $('.toggle').click(function() {
                    $('.toggle').not(this).children('ul').slideUp("slow");
                    $(this).children('ul').slideToggle("slow");

                });

                /* Don't hide the dropdown when clicking inside */
                $dd.on("click", function(evt) {
                    evt.stopPropagation();
                });

            } 
            </script>

私の .dropdown div は、意図したとおりに表示および非表示を行います。しかし、必要なのは、ドロップダウンの外側をクリックするとドロップダウンを非表示にする関数を追加することです。ドキュメントのクリック イベントをリッスンできるようになりましたが、.toggle Navbar オプションをクリックしても機能しません。

したがって、.toggle リンクを機能させたままにして、.dropdown ul を閉じずに内部をクリックできるようにしたいのですが、ページの他の場所をクリックすると、.dropdown は .slideUp("slow") になります。

何か助けはありますか？ありがとうございました。

4

1 に答える 1

1

jquery event.targetを使用して、そのイベントを開始したものを確認し、それに応じて機能させることができます。以下のようなもの

   $(document).ready(function () {
    $("#navbar").click(function (event) {
        var check = $(event.target).attr('class');
        alert(check);
        if (check == 'toggle') {
            //do something
        }

        if (check == 'dropdown') {
            //do something
        }
    });
});

ここで動作するjsfiddleをチェックしてください

于 2013-03-23T16:58:17.470 に答える