2

jQuery を使用してクリックを登録しようとしていますが、パディングに問題があるようです。

これを確認するのに役立つjsFiddleを次に示します。

開いているメニューをクリックして何もしないようにしようとしていますが、他の場所をクリックするとすべてのメニューが閉じます。それはうまく機能しますが、最大の問題は、上をクリックして<li>もその範囲内にある<div>場合に失敗することです。パディングがdivなどの一部としてカウントされていないようです。

コードもここにあります：

HTML

<a href="#mainMenu" class="menuLink">Main</a>
<div id="mainMenu" class="menu">
    <ul>
        <li class="menuItem"><a href="#">item 1</a>
        </li>
        <li class="menuItem"><a href="#">item 2</a>
        </li>
        <li class="menuItem"><a href="#">item 3</a>
        </li>
        <li class="menuItem"><a href="#">item 4</a>
        </li>
        <li class="menuItem"><a href="#">item 5</a>
        </li>
    </ul>
</div>
<a href="#menuTwo" class="menuLink">Menu 2</a>

<div id="menuTwo" class="menu">
    <ul>
        <li class="menuItem"><a href="#">item 1</a>
        </li>
        <li class="menuItem"><a href="#">item 2</a>
        </li>
        <li class="menuItem"><a href="#">item 3</a>
        </li>
        <li class="menuItem"><a href="#">item 4</a>
        </li>
        <li class="menuItem"><a href="#">item 5</a>
        </li>
    </ul>
</div>

JS

$(document).ready(function () {
    //Attach a handler to the document for clicks.
    $(document).on("click", function (e) {
        //Get the click's target and convert to $ object.
        $target = $(e.target);
        //Find out if the click occurred on a menu.
        $parents = $target.parents(".menu");
        if ($parents.length > 0) {
            console.log(["Menu click", e]);
            return;
        } else {
            //If it wasn't on a menu close the open menu.
            console.log(["Non-menu click", e]);
            $('.menu').hide();
        }
    });

    //Handle showing the menu.
    $('.menuLink').on("click", function (e) {
        //Close all other menus.
        $('.menu').hide();
        console.log("Started");
        e.stopPropagation();
        e.preventDefault();
        var targetMenu = $(e.target).attr("href");
        $(targetMenu).show();
    });

});

CSS

#mainMenu {
    background-color: lightblue;
}
#menuTwo {
    background-color: lightgreen;
}
.menu {
    display: none;
    border: 1px solid black;
}
4

3 に答える 3

3

あなたの問題はこの行にあります：

$parents = $target.parents(".menu");

これを次のように変更します。

$parents = $target.closest(".menu");

div には class を持つ親がない.menuため、それをクリックしても何も見つかりません。closest選択した要素を検索に含めます。

http://jsfiddle.net/ecnGr/

于 2013-08-15T19:10:06.200 に答える
1

closest問題を解決するために使用します

$parents = $target.closest(".menu");

それでも使用したい場合はparents、追加のチェックを追加して、クリックされた要素が div かどうかを確認します。

if ($parents.length > 0 || $target.is('.menu')) {

フィドルをチェック

コードの問題は、parentsメソッドに問題の要素が含まれていないことです。したがって、そのチェックを明示的に行うか、問題の もclosest含む which を使用する必要がありelementます。

于 2013-08-15T19:10:56.057 に答える
1

メニューのすべてのクリックを消費するだけで、うまくいきます。

$(document).ready(function () {
    //Attach a handler to the document for clicks.
    $(document).on("click", function (e) {
        $('.menu').hide();
    });

    $('.menuLink').on("click", function (e) {
        $('.menu').hide();
        e.stopPropagation();
        e.preventDefault();
        var targetMenu = $(e.target).attr("href");
        $(targetMenu).show();
    });

    //Handle showing the menu.
    $('.menu').on("click", function (e) {
         e.stopPropagation();
    });
});

http://jsfiddle.net/MightyPork/UCwAt/8/

于 2013-08-15T19:15:52.700 に答える