单击栏或按钮外部时隐藏菜单侧栏答案

【问题标题】：Hide menu sidebar when clicking outside the bar or the button单击栏或按钮外部时隐藏菜单侧栏
【发布时间】：2015-04-30 06:52:51
【问题描述】：

我正在尝试制作一个类似于语义 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 propagation 但我无法让它播放。

【问题讨论】：

显示整个代码或 JSfiddle
hide-menu 和 show-menu 在哪里？
你能演示一下吗？
尝试其他问题的解决方案：stackoverflow.com/a/65236502/7688047

标签： javascript jquery html

【解决方案1】：

编辑你的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');
});

希望这会奏效。

这是小提琴。 http://jsfiddle.net/ex8ddv5q/1/

【讨论】：

【解决方案2】：

如需另辟蹊径，请查看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');

    }
});

【讨论】：

【解决方案3】：

如果有人来到这里并使用 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');
}

模板中的这个：

<app-sidenav></app-sidenav>
<div class="main-body" (click)="applicationService.hideSideNav()">
    <router-outlet></router-outlet>
</div>

【讨论】：

【解决方案4】：

假设如果你的侧边栏宽度是270px，检查鼠标点击坐标，如果它更大，给它的样式左属性为-270px;

function handleMousePos(event) {
      var mouseClickWidth = event.clientX;
      if(mouseClickWidth>=270){
            document.getElementById("mySidenav").style.left='-270px'
           }
}

document.addEventListener("click", handleMousePos);

这是我的示例：https://codepen.io/johncy/pen/oMyzZr

【讨论】：

【解决方案5】：

$('body').click(function(){
     $('#hide-menu').removeClass('show-menu');
});

【讨论】：

因为你的身高=按钮高度