您的位置：首页 > 编程语言

经典的菜单显示隐藏代码

2016-06-13 10:31 736 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航