通过单击正文关闭侧菜单
Close Sidemenu by Clicking in Body
我希望菜单的作用类似Medium上的侧菜单,当侧菜单打开并且用户在#sidebar-wrapper
外部单击时,侧菜单关闭。现在我必须单击切换X来关闭菜单。
html
<a id="menu-toggle" href="#" class="toggle more navbar-brand">logo</a>
<div id="sidebar-wrapper">
<a id="menu-close" href="#" class="toggle">X</a>
</div
一些css
#sidebar-wrapper {
margin-left: -230px;
left: 0;
top: -20px;
width: 230px;
background: #f7f7f7;
position: fixed;
height: 120%;
overflow-y: auto;
z-index: 1000;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper.active {
left: 230px;
width: 230px;
border-right: 1px solid #ccc;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
js
<script>
// menu close function
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
// menu open function
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
试试这个
$("#menu-close").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(){
if($("#sidebar-wrapper").hasClass('active')){
$("#sidebar-wrapper").removeClass("active");
}
});
演示
使用stopPropagation防止冒泡事件
$("#menu-close").click(function(e) {
e.stopPropagation();
$("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(e) {
$("#sidebar-wrapper").toggleClass("active");
});
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- angular的下拉菜单
- 使用JQuery的动态上下文菜单
- JQuery在单击正文时隐藏上下文菜单
- 阻止在单击和关闭覆盖菜单css时滚动正文
- jQuery/JS正在获取导航菜单,以便在单击正文时隐藏
- 关闭菜单,单击带有事件侦听器和父节点的正文
- 如何垂直展开网页'打开菜单时的正文
- 显示和隐藏菜单 当您单击正文时
- 画布外导航:如何在不覆盖正文的情况下,在一级菜单的顶部滑入二级菜单
- 菜单关闭点击正文页
- Mobile Safari可在菜单打开时阻止正文滚动
- 在菜单上单击添加noscroll类到正文
- Uib下拉菜单在HTML视图的正文中不起作用
- 如何在Bootstrap中将单个下拉菜单附加到正文
- 通过单击正文关闭侧菜单
- 如何在移动设备上创建模式导航菜单并防止正文滚动
- 在正文单击时隐藏子菜单
- 单击菜单项或其他元素将改变正文背景图像