DEMO

Question

当用户点击徽标时，侧边栏会打开;当他们点击菜单或正文时，侧面菜单关闭，但是有一个例外我想弄清楚。如果单击侧面菜单中的输入字段，菜单将关闭。当用户在输入字段中单击时，我希望sidemenu保持打开状态。下面是jsfiddle和js。

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

Answer 1

试试这个。

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

// Stop propagation for sidebar-wrapper to stop closing the sidebar panel
$('#sidebar-wrapper').click(function(e){
   e.stopPropagation();
})
$("#menu-toggle").click(function(e) {
    e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(){
   if($("#sidebar-wrapper").hasClass('active')){
      $("#sidebar-wrapper").removeClass("active");
   }
});

Update Fiddle

Answer 2

试试这个

  $("#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(e){
   if($('#sidebar-wrapper').has(e.target).length === 0){
       if($("#sidebar-wrapper").hasClass('active')){
          $("#sidebar-wrapper").removeClass("active");
       }
   }
});

如果在输入字段中单击，则保持侧栏打开

2 个答案:

DEMO