经典的菜单显示隐藏代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
经典的菜单显⽰隐藏代码
1.按钮上的click事件：控制菜单的显⽰隐藏,同时需要阻⽌事件冒泡到document；
2.document的click事件：让menu隐藏,这个功能是点击document任意⼀处,将菜单隐藏；
3.菜单的click事件：菜单本⾝并没有，是菜单内部的元素的click事件，需要阻⽌内部元素的click事件冒泡到document；
4.菜单内部list元素的click事件：menu不能隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单隐藏显⽰</title>
<style>
.showBtn{
cursor: pointer;
}
.menu {
display: none;
background-color: #fff;
width: 100px;
}
.menu ul{
list-style: none;
}
.menu a{
display:block;
text-decoration: none;
margin: 10px 0;
}
</style>
</head>
<body>
<input type="button" class="showBtn" value="显⽰菜单">
<!-- 菜单默认不显⽰ -->
<div class="menu">
<ul>
<li><a href="">菜单⼀</a></li>
<li><a href="">菜单⼆</a></li>
<li><a href="">菜单三</a></li>
</ul>
</div>
<script src="./jquery-1.11.3.min.js"></script>
<script>
//点击“显⽰菜单”按钮时，显⽰菜单，并阻⽌事件冒泡
$(".showBtn").click(function(e){
if($(".showBtn").val()=='隐藏菜单'){
$(".menu").hide();
$(this).val('显⽰菜单');
}else{
$(".menu").show();
$(this).val('隐藏菜单');
}
e.stopPropagation();//阻⽌按钮点击事件冒泡到document
});
//点击“菜单”内部时，阻⽌事件冒泡。
(这样点击内部时，菜单不会关闭)
$(".menu").click(function(e){
e.stopPropagation();//阻⽌菜单内部点击事件冒泡到document
});
//监听整个document的点击事件，如果能收到事件(说明点击源既不是“显⽰菜单”按钮，也不来⾃菜单内部)，就可以放⼼关闭菜单了 $(document).click(function(){
$(".menu").hide();
$(".showBtn").val('显⽰菜单');
});
</script>
</body>
</html>。