如何在单击外部时关闭侧边栏

How to close a sidebar when clicking outside?

本文关键字：侧边栏 外部 单击      更新时间：2023-09-26

当这个函数调用它时，我有一个右侧边栏出现

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');
        }
    });
};

但是如您所见，我只能在单击该特定元素时打开和关闭该侧边栏，当我单击外部时，我应该怎么做才能关闭它？

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

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

$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.
}
});

看看这个：如何检测元素外部的点击？

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

我会这样做... （演示在这里）

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

只需检测对包含页面的元素的点击。并防止侧边栏上的点击冒泡到该元素。

$("body").click(function () {
   toggleSidebar();
});
$("#sidebar").click(function (e) {
   e.stopPropagation();
});
相关文章：