Javascript 单击栏或按钮外时隐藏菜单侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29960942/
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
Hide menu sidebar when clicking outside the bar or the button
提问by DMande
I am trying to make a menu like the semantic UI but I only achieved to click the menu button and open the menu and vice versa. I use toggle class to show the sidebar but I dont know if this way is completely right:
我正在尝试制作一个类似于语义 UI 的菜单，但我只实现了单击菜单按钮并打开菜单，反之亦然。我使用切换类来显示侧边栏，但我不知道这种方式是否完全正确：
<div class="menu-button" id="menu-button"></div>
$('#menu-button').click(function(event) {
$('#hide-menu').toggleClass('show-menu');
});
.hide-menu {
background-color:#336ca6;
position: absolute;
top:0;
right:0;
z-index: 1;
width: 300px;
height: 100%;
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.show-menu {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
I've tried the event propagationbut I can't manage to make it play.
我已经尝试过事件传播，但我无法让它发挥作用。
回答by murli2308
Edit your js code to following
将您的 js 代码编辑为以下
$('#menu-button').click(function(e){
e.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});
$('#hide-menu').click(function(e){
e.stopPropagation();
});
$('body,html').click(function(e){
$('#hide-menu').removeClass('show-menu');
});
Hope this will work.
希望这会奏效。
Here is fiddle. http://jsfiddle.net/ex8ddv5q/1/
这里是小提琴。 http://jsfiddle.net/ex8ddv5q/1/
回答by R4nc1d
For a different take on it check this Fiddle
对于它的不同看法，请检查这个Fiddle
$('#menu-button').click(function (evt) {
evt.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});
$('body,html').click(function (e) {
var container = $("#hide-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass('show-menu');
}
});
回答by Andrew Evans
In case somebody comes here and is using Angular instead of JQuery, we got this to work with something similar to the above like this:
万一有人来到这里并使用 Angular 而不是 JQuery，我们可以使用类似于上面的内容，如下所示：
public toggleSideNav() {
this.showSideNav = !this.showSideNav;
console.log('show side nav', this.showSideNav);
event.stopPropagation();
}
public hideSideNav() {
this.showSideNav = false;
console.log('hide side nav');
}
And this in the template:
这在模板中：
<app-sidenav></app-sidenav>
<div class="main-body" (click)="applicationService.hideSideNav()">
<router-outlet></router-outlet>
</div>
回答by Johncy
Suppose if your sidebar width is 270px,check the mouse click coordinate.If it's greater give its style left attribute as -270px;
假设如果你的侧边栏宽度是 270px，检查鼠标点击坐标。如果它更大，给它的 style left 属性为 -270px;
function handleMousePos(event) {
var mouseClickWidth = event.clientX;
if(mouseClickWidth>=270){
document.getElementById("mySidenav").style.left='-270px'
}
}
document.addEventListener("click", handleMousePos);
Here is my sample:https://codepen.io/johncy/pen/oMyzZr
这是我的示例：https: //codepen.io/johncy/pen/oMyzZr
回答by Jugal
$('body').click(function(){
$('#hide-menu').removeClass('show-menu');
});
