当点击区域外时隐藏菜单 - Bootstrap

Question

当我点击显示信息窗口时，我在Bootstrap中创建按钮。 我想在显示信息窗口吧，如果我点击的信息的范围之外，那么信息窗口将隐藏在按钮改变图标太

演示

https://codepen.io/anon/pen/xLeRYd

JS

$(document).ready(function() { 
    $('#nav-info-icons').click(function() { 
     $(this).toggleClass('open'); 
    }); 
}); 

$(document).ready(function() { 
    var sideslider = $('[data-toggle=collapse-info]'); 
    var sel = sideslider.attr('data-target'); 
    sideslider.click(function (event) { 
     $(sel).toggleClass('in'); 
    }); 
}); 

我找到了解决方案

$(document).ready(function() { 
    $(document).mouseup(function (e) { 
     var container = $("#navbar-info-panel"); 
     var container1 = $("#nav-info-icons"); 
     var opened = $("#nav-info-icons").hasClass("open"); 
     if (!container.is(e.target) && container.has(e.target).length === 0 && !container1.is(e.target) && container1.has(e.target).length === 0) { 
      if (opened) { 
       $("button.navbar-toggle-info").click(); 
       $("#nav-info-icons").removeClass("open"); 
      } 
     } else { 

     } 
    }); 
}); 

Answer 1

试试这个：

$('body,html').on('click', function() { 
    $('#nav-info-icons').removeClass('open'); // Hide the nav 
    $(sel).removeClass('in'); // Hide for collapse 
}); 

Answer 2

另一种解决方案。用下面的方式更新JS。

$(document).ready(function() { 
    var sideslider = $('[data-toggle=collapse-info]'); 
    var sel = sideslider.attr('data-target'); 

    sideslider.click(function (event) { 
     event.stopPropagation(); //Stop even bubbling to parent 
     $(sel).toggleClass('in'); 
     $('#nav-info-icons').toggleClass('open'); 
    }); 

    $('#nav-info-icons').click(function() { 
     event.stopPropagation(); //Stop even bubbling to parent 
     $(this).toggleClass('open'); 
     $(sel).toggleClass('in'); 
    }); 

    $('body').on('click', function (e) { 
     if ($(e.target).is($('#nav-info-icons span'))) return; //Don't execute onclick 

     if($('#nav-info-icons').attr("class") === "open") //Check for class - open, then hide info panel 
     { 
      $('#nav-info-icons').removeClass('open'); 
      $('#navbar-info-panel').addClass('in'); 
     } 
    }) 
});