Как удалить класс блока по клику в любом месте страницы?

Question

[denn70]

Всем привет, на сайте есть адаптивное меню на jquery , выезжающее слева при клике по

<a href="#" data-toggle=".container" id="sidebar-toggle"></a>

Иницилизируется скрипт кодом

$(window).load(function(){
      $("[data-toggle]").click(function() {
        var toggle_el = $(this).data("toggle");
        $(toggle_el).toggleClass("open-sidebar");
      });
	  
	});

к основному блоку добавляется класс .open-sidebar

Стоит задача при клике на любом месте страницы свернуть меню, т.е удалить класс .open-sidebar. К сожалению, плохо разбираюсь в JS

Answer 1

[denn70]

В результате придумал только такой способ, чтобы можно было закрывать по клику в любом месте и по крестику заодно

<script type='text/javascript'>
$(window).load(function(){
$("#mobile-menu-toggle").click(function(){ // - при клике по кнопке
   $(".container").toggleClass("open-sidebar"); // - Основной контейнер сдвигается вправо на 240px
   $("#sidebar").toggleClass("open");// - меню сдвигается вправо на 240px и появляется)

});

$('.container').on('click',function(){ // - при клике по любому месту основного контейнера сайта
$('.container').removeClass('open-sidebar'); // - Основной контейнер отьезжает назад на 240px
$("#sidebar").removeClass("open"); // - меню отьезжает на 240px назад и прячется)
});

$(".close").click(function(){ // - закрытие по крестику
   $(".container").removeClass("open-sidebar");
  $("#sidebar").removeClass("open");

});
});

</script>

Comments

[denn70]

Хотя основному контейнеру наверное и не надо отъезжать, просто затемнить

[denn70]

Теперь проблема - если кликать в область .container и попадать на какой нибудь ссылочный элемент, то меню то сворачивается, но происходит и переход по ссылке. Если к .container применить pointer-events: none; то не срабатывает закрытие меню)

Answer 2

[Максим Тимофеев]

$('body').on('click',function(){
$('.open-sidebar').removeClass('.open-sidebar');
});

Comments

[Максим Люмен]

так меню вообще не откроется , потому что любой элемент находится в боди : я не спорю но по логике вроде так

[Максим Тимофеев]

Максим Люмен: ЕСли добавить задержку на открывание, то откроется

[denn70]

Удалось сделать закрытие/удаление класса только по внутреннему блоку с классом .close (типа закрытие крестиком). А чтобы по клику body не получается, походу и правда нудна заддержка межлюду событием закрытия и открытия. Только вот как?)

[Максим Люмен]

denn70: я не претендую на звание лучшего кодера но вот мой пример: как закрывать блок при клике на body : codepen.io/maximvelin/pen/jrqKaR?editors=0110 но и hide надо добавить тому крестику что внутри

Answer 3

[Максим Люмен]

Это первый пример с модальным окном: codepen.io/maximvelin/pen/jrqKaR
Это второй пример с меню : codepen.io/maximvelin/pen/YWqvvY

Но и естественно я не претендую на звание лучшего кодера.
Принцип работы в обоих примерах один и тот же
Оба примера закрываются в любом месте экрана.