jQuery单击事件目标填充

时间:2013-08-15 19:05:36

标签: javascript jquery html css dom

我正在尝试使用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;
}

3 个答案:

答案 0 :(得分:3)

你的问题在于这一行:

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

将其更改为:

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

div没有类.menu的父级,所以如果单击它,它就找不到任何内容。 closest在搜索中包含所选元素。

http://jsfiddle.net/ecnGr/

答案 1 :(得分:1)

使用closest解决您的问题

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

如果您仍想使用parents,请添加额外的检查以查看所点击的元素是否为div。

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

<强> Check Fiddle

您的代码存在的问题是parents方法不包含相关元素。因此,您必须明确地执行此检查,或使用包含closest的{​​{1}}。

答案 2 :(得分: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/