Question

当这个函数叫做

时，我出现了右侧边栏

var toggleSidebar = function() {
    $('#sidebar .arrow-box').click(function() {
        if (s === 0) {
            s = 1;
            $('#sidebar').css('left', '0');
            $('#sidebar .arrow').removeClass('dir-two');
            $('#sidebar .arrow').addClass('dir-one');
            $('#content').css('padding-left', '0');
        } else {
            s = 0;
            $('#sidebar').css('left', '-300px');
            $('#sidebar .arrow').addClass('dir-two');
            $('#sidebar .arrow').removeClass('dir-one');
            $('#content').css('padding-left', '300px');
        }
    });
};

但正如您所看到的那样，只有在点击该特定元素时我才能打开和关闭该侧边栏，当我点击外面时，我应该怎么做以关闭它？

以防万一：根据用户体验，当侧边栏出现时，我无法在整个视图中使用深色背景。

Answer 1

看看这个： How do I detect a click outside an element?

$('html').click(function() {
    //  Hide the sidebar
});

$('#sidebar').click(function(event){
    event.stopPropagation(); // prevents executing the above event
});

Answer 2

测试点击的目标。如果它与您要关闭的目标不匹配，请将其关闭。所有其他元素都是正文的子元素 - 因此单击面板外的任何位置都将检索单击目标。

$sidebar = $('#sidebar');
$( "body" ).click(function( event ) {
  var a  = event.target;
  if(a === $sidebar){
//close the sidebar
//you may also want to test if it is actually open before calling the close function.
}
});

Answer 3

我会这样做...... (DEMO HERE)

sideBarOpen=false;     

function openSidebar(){
   sideBarOpen = true;
   $('#sidebar').css('margin-left', '0');
   $('#sidebar .arrow').removeClass('dir-two');
   $('#sidebar .arrow').addClass('dir-one');
   $('#content').css('padding-left', '0');
}

function closeSidebar(){
   sideBarOpen=false;
   $('#sidebar').css('margin-left', '-300px');
   $('#sidebar .arrow').addClass('dir-two');
   $('#sidebar .arrow').removeClass('dir-one');
   $('#content').css('padding-left', '300px');
}

$( document ).click(function( event ) {
   var target = $( event.target );
   if(sideBarOpen){
      closeSideBar();
   } else {
     if(target.is( '#sidebar' )){
      openSideBar();
     }
   }
});

如果用户点击任意位置，则会关闭它，但如果用户点击侧边栏，则会将其打开

更新

如果您还想点击侧边栏内的内容只需给它们一个类，然后添加到target.is检查。

栏内链接的示例

     <a href='#' class='menuLinks'>Test Link</a>

然后是你的点击处理程序

    if(target.is( '#sidebar' ) || target.is('.menuLinks')){
      openSideBar();
    } else {
      if(sideBarOpen){
       closeSideBar();
     }

Answer 4

只需检测包含该网页的元素的点击次数即可。并防止侧边栏上的点击冒泡到该元素。

$("body").click(function () {
   toggleSidebar();
});

$("#sidebar").click(function (e) {
   e.stopPropagation();
});

如何在外面点击时关闭侧边栏？

4 个答案: