Как при клике вне элемента скрыть его, если элементов несколько?

Question

[Александр]

Есть 4 одинаковых по структуре блока с разным содержимым. как сделать, что бы при клике вне открывшегося блока он скрывался?
Сделал так

$(".filter-link").click(function() {
  $('.filter-block').toggle();
});
$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter").length) {
    $('.filter-block').hide();
  }
  e.stopPropagation();
});

и вот таких 4 блока

<form class="filter-form">
    <div class="filter">
    <a class="filter-link" href="#" onclick="$('.filter-block-cat').toggle();return false;">Категория</a>
    <ul class="filter-block filter-block-cat" aria-labelledby="filter-block" style="display:none;">
содержимое
    </ul>
    </div

при клике по блоку открывается 3 других блока, а при клике вне блока все закрываются. Как правильно реализовать? что бы блоки друг от друга не зависели?

Comments

[Александр Васильев]

$(this) и .not($(this))

[Александр]

Александр Васильев, к сожалению я не силён в java и почитав документацию так и не понял как это применять в данном примере, понял только что часть кода лишняя т.к в сылке уже есть эта функция

$(".filter-link").click(function() {
  $('.filter-block').toggle();
});

Answer 1

[UthvfyV]

"при клике вне открывшегося блока", так блоки открыты или нет? Я понял что открыты. Или как? Неважно. Назначьте разные классы для каждого блока. Блоку который вне всего этого хозяйства. дадим класс external. У одного из блоков класс filter1. Тогда

<script>$(document).ready(function(){
$(".external.").click(function(){
$(".filter1").hide();});});</script>

Т.е. при клике по внешнему external. filter1 закрывается. Однако если мы назначим всем 4 блокам один и тот же класс то они дружно будут взаимодействовать. Сюда $(".external."), $(".") можно вставлять не только класс или id, но название тега, допустим body или aside. Или можно наоборот, показать блок.

<script>$(document).ready(function(){
$(".external.").click(function(){
$(".filter1").show();});});</script>

Comments

[Александр]

у всех блоков одинаковые классы и по умолчанию они скрыты. При клике по одному из блоков он открывается функцией

<a class="filter-link" href="#" onclick="$('.filter-block-cat').toggle();return false;">Кнопка</a>

используемый мною скрипт

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter").length) {
    $('.filter-block').hide();
  }
  e.stopPropagation();
});

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

[UthvfyV]

#b1,#b4,#b5,#b6,#b3,#b2{width:50px;height:30px;background-color:brown;cursor:pointer;float:left;margin-right:5px;text-align:center;padding-top:10px}
    .cat-all,.mcat-all,.misk,.men1,.msor,.isk{width:300px;height:100px;border:1px solid #000000;display:none;text-align:center;padding-top:50px}
    div.open {
        display: block;
    }

<div id="b3"><div>b3</div></div>
<div id="b2">b2</div>
<div id="b1">b1</div>
<div id="b4"><span>b4</span></div>
<div id="b5">b5</div>
<div id="b6">b6</div>

<br><br><br>
<div class="isk">block button 1</div>
<div class="mcat-all">block button 2</div>
<div class="misk">block button 3</div>
<div class="men1">block button 4</div>
<div class="cat-all">block button 5</div>
<div class="msor">block button 6</div>

let open;
const rels=[['#b3','.isk'],['#b2','.mcat-all'],['#b1','.misk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];
addEventListener( 'click' , ({target}) => {
if(target.closest('.open')) return;
let item = rels.find(([selector, ..._]) => target.closest(selector));
if(item) {
item = document.querySelector(item[1]);
if(!item) return;
item.classList.toggle('open');
}
if(open && open != item) open.classList.remove('open');
open = item;
})