通過點擊正文關閉Sidemenu

Question

我希望菜單像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> 

Answer 1

試試這個

$("#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"); 
    } 
}); 

DEMO

Answer 2

使用stopPropagation從防止事件冒泡

$("#menu-close").click(function(e) { 
     e.stopPropagation(); 
     $("#sidebar-wrapper").toggleClass("active"); 
}); 

    $(document).click(function(e) { 
      $("#sidebar-wrapper").toggleClass("active"); 
    });