单击栏外或按钮时隐藏菜单边栏 [英] Hide menu sidebar when clicking outside the bar or the button

问题描述

我试图制作一个类似于语义UI的菜单，但我只能点击菜单按钮并打开菜单，反之亦然。我使用切换类来显示侧边栏，但我不知道这种方式是否完全正确：

 < div class =menu -buttonid =menu-button>< / div> 
 
 $（'＃menu-button'）。click（function（event）{
 $（'＃hide-menu'）。toggleClass（'show-menu'）; 
}）; 
 
 .hide-menu {
 background-color：＃336ca6; 
位置：绝对; 
 top：0; 
 right：0; 
 z-index：1; 
 width：300px; 
身高：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：全部为0.3s线性; 
 -moz-transition：全部为0.3s线性; 
 -ms-transition：全部为0.3s线性; 
 -o-transition：全部为0.3s线性; 
转换：全部为0.3s线性; 
} 
 
 .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）; 
} 
  

我尝试了事件传播，但是我无法使它发挥作用。 解决方案

编辑你的js代码到

  $（'＃menu-button'）。click（function（e）{ 
 e.stopPropagation（）; 
 $（'＃hide-menu'）。toggleClass（'show-menu'）; 
}）; 
 
 $（'＃hide-menu'）。click（function（e）{
 e.stopPropagation（）; 
}）; 
 $ b $（'body，html'）。click（function（e）{
 $（'＃hide-menu'）。removeClass（'show-menu'）; 
}）; 
  

希望这会起作用。

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

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:

<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 but I can't manage to make it play.

解决方案

Edit your js code to following

$('#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/

这篇关于单击栏外或按钮时隐藏菜单边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！