4

クリックでトリガーされる小さなドロップダウン システムを構築する必要があります。「div の外をクリックする」という質問を処理する方法を管理しました (この以前に投稿された質問のおかげです)。

別のドロップダウンのトリガーをクリックするか、ドロップダウン自体の外側をクリックして、現在のドロップダウンを非表示にすることができます。したがって、問題は次のとおりです。

  1. 現在のドロップダウンのトリガーをクリックしても無駄です。他のものが適切に機能している間、ドロップダウンは消えません
  2. 現在のドロップダウン (例: .divider アイテム)内をクリックすると、ドロップダウンが消えます。

したがって、ここにhtmlコードがあります（ヘッダーに複数のドロップダウンがあるとします）

    ...
    <div id="header" class="navbar">
        <div class="line">
            <a href="#" class="logo">Site Name</a>
            <ul class="nav right">
                <li>
                    <a href="#" class="has-drop">Item 1</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action A</a></li>
                        <li><a href="#">Action B</a></li>
                        <li><a href="#">Action C</a></li>
                        <li class="divider"></li>
                        <li><span>Inline note</span></li>
                    </ul>
                </li>
                <li>
                    <a class="has-drop" href="#">Item 2</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action D</a></li>
                        <li><a href="#">Action E</a></li>
                        <li><a href="#">Action F</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Action G</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div> <!-- end #header -->
    ...

そして、これは実際に私が使用しているJSコードで、専用ファイルにあります

    $(document).ready(function(){

        $("html").on({
            click: function(e) {
                $(".dropdown-menu.opened").toggleClass("opened");
            }
        });

        $(".nav > li > a").on({
            click: function(e){
                e.stopPropagation();

                $(".dropdown-menu.opened").toggleClass("opened"); // should close each .dropdowns before opening the current one
                $(e.target).siblings(".dropdown-menu").toggleClass("opened");
            }
        });

    });

トリガーを再度クリックしてもドロップダウンが非表示にならないのはなぜだと思いますか? 内部$(".nav > li > a").on()で実質的に同じことをしているからですか？

また、その子の一部がクリックされたときにドロップダウン自体が非表示になるのを防ぐ方法はありますか? しかし、これは別の質問に関連している可能性があります。わかりません。

最後になりましたが、これはあなたの意見では、すべてを行うための適切な方法ですか?

よろしくお願いします

編集: @Beetroot-Beetroot のおかげで、私は問題を解決する方法を管理したので、現在の作業コード $(document).ready(function(){

        $("html").on("click", function(e) {
            $(".dropdown-menu.opened").removeClass("opened");
        });

        $(".nav").find("li :first-child").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();

            var $thisMenu = $(this).siblings(".dropdown-menu").toggleClass("opened");
            $(".dropdown-menu").not($thisMenu).removeClass("opened");
        });

    });

「秘密」は .not() の巧妙な使い方で、今ではもっと理解できました。

ターゲット (<a>またはできる<span>) をより一般的なものに変更しました。長期的なパフォーマンスについてはわかりませんが、確かに良い出発点です.

から

$(".nav").find("a.has-drop").on(...

に

$(".nav").find("li :first-child").on(...

ここもまた

$(this).closest(".nav").find(".dropdown-menu").not(... $(".dropdown-menu").not(...それは、開いているすべてのドロップダウンを非表示にしたいからです. 以前の動作では、1 種類のターゲットと 1 つのオリジン領域のみを考慮していました (例: これらのドロップダウンも、ヘッダーとコンテンツの何らかのツールバーの内側に必要かもしれません)。

EDIT 2 : @Beetroot-Beetroot がまた助けてくれました。彼が示唆したように、現在のコードを jsFiddle に移植しているときに、突然解決策が思い浮かびました。パーツ$("html").on("click", ...はこんな感じになりました

    $("html").on("click", function(e) {

        if ( $(e.target).hasClass("dropdown-menu") || $(e.target).parents(".dropdown-menu").length ) {
            // do nothing, basically
        } else {
            $(".dropdown-menu.opened").removeClass("opened");
        }
    });

$("html")基本的に、ドロップダウンの幅でクリックが何かするかどうかを監視するだけです。はいの場合、何もしません。いいえの場合、ドロップダウンがあった場所ではなく、どこかをクリックしたことを意味します。

4

1 に答える 1

2

このようなものが仕事をするべきだと思います：

$(document).ready(function() {
    $("html").on('click', function(e) {
        $(".dropdown-menu.opened").removeClass("opened");
    });
    $(".nav").find("a.has-drop").on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var $thisMenu = $(this).siblings(".dropdown-menu").toggleClass("opened");
        $(this).closest(".nav").find(".dropdown-menu").not($thisMenu).removeClass("opened");
    });
});

テストされていない

ノート ：

  • removeClass()toggleClass()数か所交換します。
  • 秘密は、$thisMenu最初に切り替えnot($thisMenu)てから、次の行で使用して、$thisMenu切り替えられた状態を維持することです。
于 2012-12-19T01:52:11.293 に答える