Удалить класс при клике вне блока, но исключить клик по самому блоку?

Question

[denn70]

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

function() {
$(".centercol").toggleClass("open-sidebar"); // - Основной контейнер сдвигается вправо на 240px
$("#sidebar").toggleClass("open");// - меню сдвигается вправо на 240px и появляется)
$("#inner").toggleClass("pointer")
$(".block-header").toggleClass("pointer")
$(".close").show();
return false;
	});
	
	
$(".close").click(function(){ // - закрытие по крестику
$(".centercol").removeClass("open-sidebar");
$("#sidebar").removeClass("open");
$("#inner").removeClass("pointer")
$(".block-header").removeClass("pointer")
$(".close").hide();
});	
	// - закрытие при клике вне блока, должно исключать клик по самому блоку по идее
$(document).click( function(event){
	if( $(event.target).closest("#sidebar").length ) // ищет в коде элемент #sidebar
	return;
$("#sidebar").removeClass("open"); // - меню отьезжает на 240px назад и прячется)
$("#inner").removeClass("pointer")
$(".block-header").removeClass("pointer")
$(".close").hide(); // скрываем его
	event.stopPropagation();
});

Код закрытия пробовал и такой

$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("#sidebar"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			$("#sidebar").removeClass("open"); // - меню отьезжает на 240px назад и прячется)
$("#inner").removeClass("pointer")
$(".block-header").removeClass("pointer")
$(".close").hide(); // скрываем его скрываем его
		}
	});

Оба варианта все равно закрывают меню при клике на сам блок меню - #sidebar. Есть ощущение, что это происходит, из-за того, что меню по коду вложено глубоко и клик происходит по родительским элементам. Хотя, я блоку меню и назнчали самый высокий z-index)

Comments

[Константин Башаркевич]

jstherightway.org

Answer 1

[Дмитрий Кравченко]

что-то типа

$(document.body).on('click', function(e){
  if(!$(e.target).closest('#sidebar').length){
    close_sidebar();
  }
})

Comments

[denn70]

Немного разобрался, этот вариант будет работать, как и другие два. Проблема в добавляемом классе .pointer к блоку #inner - на него я повесил pointer-events: none; чтобы при закрытии меню в любом месте не срабатывали ссылки, и не было перехода на другую страницу.

А как сделать без pointer-events: none; чтобы не было перехода по ссылкам в момент закрытия меню, не ясно)

[Дмитрий Кравченко]

denn70: перекройте весь контент прозрачным дивом

[denn70]

Спасибо, добавил к самому блоку меню pointer-events: auto; Теперь как нужно - меню закрывается только по клику вне области меню, переход по ссылкам не происходит) Благодарю. Те проблема была не в jquery, а в css