我正在尝试使用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;
}
答案 0 :(得分:3)
你的问题在于这一行:
$parents = $target.parents(".menu");
将其更改为:
$parents = $target.closest(".menu");
div没有类.menu
的父级,所以如果单击它,它就找不到任何内容。 closest
在搜索中包含所选元素。
答案 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();
});
});