如何正确处理“body”jquery事件以关闭下拉列表 [英] How to properly handle a 'body' jquery event to close a dropdown
问题描述
我正在尝试下拉式选单与投标箱仪表板非常相似，如果您点击用户名，弹出菜单就会出现。再次点击用户名将关闭弹出窗口（每次点击时切换）。
I'm trying to make a dropdown very similar to dropbox dashboard, where if you click the username a flyout menu appears. Clicking the username again will close the flyout (toggling it every time you click).
一个注意事项是在弹出窗口上点击任何 本身也会关闭它。
The one caveat is that clicking anywhere except on the flyout itself will also close it.
到目前为止，我有几乎工作，但不是100％。如果您直接点击实际的body元素，它将会关闭弹出窗口。这样我的意思是我的网站有一个.wrapper元素，不占用页面的全部高度。在底部没有实际的元素覆盖它，只有< body> 标签。任何 .wrapper 或其他元素占有空间（即使是100％宽度的不可见包装）的地方，如果您点击任何有元素（除了身体）。
So far, I have it working almost, but not 100%. If you click on the actual 'body' element directly, it will close the flyout as it should. By this I mean my website has a .wrapper element which doesn't take up the full height of the page. Theres a thin strip down at the bottom with no actual element covering it, only the <body> tag. Any place where .wrapper or some other element takes up space (even a 100% width invisible wrapper), it will not close the window if you click on anything where there is an element (besides body).
javascript：
javascript:
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$(document).on('click',function(e) {
if ( $(e.target).parents($flyout).length === 0 ) {
$flyout.fadeOut(flyoutDuration);
}
});
HTML
<body>
<div class="blackbar">
<div class="container clearfix">
<a href="/"><div class="icon logo"></div></a>
<div class="flyout">
<h3>
Welcome back, <a href="#">username</a>
</h3>
<div class="menu">
<ul>
<li><a href="#"><div class="users"></div>Users</a></li>
<li><a href="#"><div class="groups"></div>Groups</a></li>
<li><a href="#"><div class="configuration"></div>Configuration</a></li>
<li><a href="#"><div class="logout"></div>Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="wrapper">
<! -- content here -->
</div>
</body>
预期行为应该是您点击的任何元素，而不是.flyout的后代应该关闭窗口（包括 .blackbar ，徽标等）
The expected behavior should be any element you click on that isnt a descendent of .flyout should close the window (including .blackbar, the logo, etc)
推荐答案
诚实 - 当我做这样的事情，我不想要框内的点击关闭元素 - 我阻止点击冒泡。
To be honest - when I am doing something like this and I do not want clicks inside of the "box" to close the element - I prevent clicks from bubbling.
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$('.flyout').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('click',function(e) {
if(flyout-open) {
$flyout.fadeOut(flyoutDuration);
}
});
这篇关于如何正确处理“body”jquery事件以关闭下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
