Как закрыть боковую панель при нажатии на нее?

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

но, как вы видите, я могу открыть и закрыть эту врезку только при нажатии на этом конкретный элементе, что я должен сделать для того, чтобы закрыть его, когда я щелкнуть снаружи?

И на всякий случай: согласно UX, я не могу использовать темный фон во всем представлении, когда появляется боковая панель.

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

Просто обнаружить щелчки на элемент, который охватывает страницу. И предотвратите щелчки на боковой панели от пузырьков до этого элемента.

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

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

Answer 3

Проверьте цель щелчка. Если он не соответствует цели, которую вы хотите закрыть, закройте ее. Все остальные элементы являются дочерними элементами тела, поэтому щелчок в любом месте за пределами панели будет получать цель клика.

$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 4

Я хотел бы сделать это, как это ... (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(); 
    } 
    } 
}); 

закроется, если пользователь щелкает в любом месте, но открыть его, если пользователь нажмет на боковой панели

UPDATE

Если вы хотите также иметь возможность нажимать на содержимое на боковой панели Просто дайте им класс и добавьте в target.is чек.

Пример ссылки внутри бара

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

Тогда ваш обработчик нажмите

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