单击时显示/隐藏 div 使用 jQuery 创建“单击菜单”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/605395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide div on click using jQuery to create a "click menu"
提问by Riri
I'm new to jQuery and need some help to show and hide a div on click. Basically I need to show a div (containing a small menu) once the user click on a link, and as soon as the user click on a link inside the div just shown. Or clicks outside the div I need to hide the div again.my HTML looks something like this (I'll exist in many places on the page).
我是 jQuery 的新手，需要一些帮助来在单击时显示和隐藏 div。基本上我需要在用户单击链接时显示一个 div（包含一个小菜单），并且一旦用户单击刚刚显示的 div 内的链接。或者在 div 之外单击我需要再次隐藏 div。我的 HTML 看起来像这样（我将存在于页面上的许多地方）。
<a class="menu" href="#">Menu</a>
<div class="menu-content" style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;">
<div><a href="#">Menu option 1</a></div>
<div><a href="#">Menu option 2</a></div>
</div>
I also have a div that wraps the whole page that I thought I'd set another click-event on to hide the div (to catch clicks outside of the actual menu).
我还有一个包装整个页面的 div，我认为我会设置另一个点击事件来隐藏 div（以捕捉实际菜单之外的点击）。
Is this the right approach for solving this and how do I then remove the handlers on the wrapper div etc, etc. What else should I think of to get this right (if it it's the right approach that is)?
这是解决这个问题的正确方法吗？然后我如何删除包装器 div 上的处理程序等等。我还应该考虑什么才能做到这一点（如果这是正确的方法）？
Update:Based on the accepted answer below I added this to solve it
更新：根据下面接受的答案，我添加了这个来解决它
//Need to return false here, otherwise the event will bubble up and trigger the hide on body
$('.menu').click(function() { $('.menu-content').hide();$(this).next().show();return false; });
$('body, .menu-content a').click(function() { $('.menu-content').hide();});
$('.menu-content a').click(function() { alert($(this)); });
回答by Scott Evernden
html:
<a class="menu" href="#">Menu</a>
<div class='a_menu' style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;">
<div><a href="#">Menu option 1</a></div>
<div><a href="#">Menu option 2</a></div>
</div>
script:
$('.menu').click(function() { $(this).next('.a_menu').show(); });
$('body, .a_menu a').click(function() { $('.a_menu').hide(); });
I'd prolly replace the < A > tags with SPANS instead styled with 'cursor:pointer'
我会用 SPANS 替换 < A > 标签，而不是用'cursor:pointer'样式
回答by Justin
Based on the question and answers above, I was able to simplify the jquery code to get something closer to what I needed. The HTML is ugly, and there's a full menu bar in here to put the drop down menu in context.
基于上面的问题和答案，我能够简化 jquery 代码以获得更接近我需要的东西。HTML 很丑，这里有一个完整的菜单栏，可以将下拉菜单放在上下文中。
<html>
<head>
<style>
#menu {
}
#menu ul {
margin: 0;
padding: 8px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
float: left;
}
#menu a,#menu span {
display: block;
float: left;
height: 28px;
background: #34579D;
margin-right: 3px;
padding: 8px 15px 0px 15px;
letter-spacing: -1px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
}
#menu .drop-menu {
cursor: pointer;
}
#menu li ul {
display: none;
position: absolute;
margin-top: 31px;
}
#menu li ul li {
background: #FFFFFF;
border-style: solid;
border-width: 3px;
border-color: #FFFFFF;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
//Need to return false here, otherwise the event will bubble up and trigger the hide on body
$(document).ready(function() {
$('.drop-menu').click(function() {
$('.drop-menu-content').toggle();
return false;
});
$('body, .drop-menu-content span').click(function() {
$('.drop-menu-content').hide();
});
});
//]]>
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="/" class="first">Home</a></li>
<li><a href="/order_report.html" class="value">Order Computer Calculated Value Report</a></li>
<li><a href="/php/order_appraisal.php">Order An Appraisal</a></li>
<li class="current_page_item"><span class="drop-menu">Sample Reports</span>
<ul class="drop-menu-content">
<li><a target="_blank" href="/documents/value_check.pdf">Computer Calculated Report ()</a></li> <br />
<li><a target="_blank" href="/documents/desktop.pdf">Computer Desk Top Appraisal ()</a></li> <br />
<li><a target="_blank" href="/documents/exterior.pdf">Desk Top/Drive by Appraisal ()</a></li>
</ul>
</li>
<li><a href="/FAQ.html">FAQ</a></li>
<li><a href="/about_us.html">About Us</a></li>
<li><a href="/php/contact.php">Contact Us</a></li>
<li>
<div class="menu-content">
<ul>
<a href="/php/contact.php">Contact Us</a>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
回答by cherouvim
Have a look at suckerfishand listamatic. What you trying to achieve may be solvable by CSS only. In addition you'll have gained some insight on how to do your navigation in a more semantic way.
看看吸盘鱼和listamatic。您尝试实现的目标可能只能通过 CSS 解决。此外，您还将获得一些关于如何以更语义化的方式进行导航的见解。
Then you can dive into jQuery for stuff that cannot be done in plain HTML+CSS.
然后，您可以深入研究 jQuery，了解无法在纯 HTML+CSS 中完成的内容。
