jQuery单击事件目标填充
jQuery单击事件目标填充
提问于 2013-08-15 19:05:36
我试图注册点击使用jQuery，似乎有一个问题的填充。
这里有一个jsFiddle来帮助您查看它。
我试图让点击打开的菜单什么也不做，而点击其他地方将关闭所有的菜单。它运行良好，但最大的问题是，如果单击<li>上方但仍在<div>中，则会失败。它似乎是，填充不算的一部分，div或其他什么。
代码也在这里：
<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
Stack Overflow用户
回答已采纳
发布于 2013-08-15 19:10:06
你的问题在于这一行：
$parents = $target.parents(".menu");将其更改为：
$parents = $target.closest(".menu");div没有一个具有类.menu的父类，所以如果单击它，它就不会找到任何东西。closest在搜索中包括选定的元素。
http://jsfiddle.net/ecnGr/
Stack Overflow用户
发布于 2013-08-15 19:10:56
使用closest解决问题
$parents = $target.closest(".menu");如果您仍然想使用parents，那么添加一个额外的检查，看看单击的元素是否是div。
if ($parents.length > 0 || $target.is('.menu')) {检查Fiddle
代码的问题是，parents方法不包括所讨论的元素。因此，您必须显式地进行检查，或者使用closest，其中也包括了问题中的element。
Stack Overflow用户
发布于 2013-08-15 19:15:52
你只需消耗菜单上的所有点击，就可以做到这一点。
$(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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18259829
复制相关文章
相似问题
腾讯云开发者
