Пропадает объект по клику на него

Question

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

Ниже код:

      var res = $(".dropdown-menu");
      $(".menu-burger").on("click", funk);

      $(document).click(function (e) {
        if (!$(e.target).parents().hasClass('menu-burger')) funk(false)
      });

      function funk(flag) {
        if (res.css("display") == "none" && flag) {
          res.fadeIn(300);
        } else {
          res.fadeOut(300);
        }
      }

.dropdown-menu {
  display: none;
  }
  
  .dropdown-menu__block {
  background: blue;
  color: #fff;
  padding: 20px
  }

<div class="header__headings menu-burger">
      <span class="burger"></span>
      <span class="title">Все рубрики</span>
    </div>

    <div class="dropdown-menu">
      <div class="dropdown-menu__caption"></div>
      <div class="dropdown-menu__list">
        <div class="dropdown-menu__block">
          Пропадет елси нажать, а не должно
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

При клике на '.dropdown-menu' или его дочерние элементы так же срабатывает и событие клика которое повесили на $(document). Нужно запретить всплытие для '.dropdown-menu', что бы клик не переходил на родительские элементы.

jQuery

$('.dropdown-menu').on('click', function(e){ e.stopPropagation() });

JS

document.querySelector('.dropdown-menu').addEventListener('click', function(e){ e.stopPropagation() });

БЛОГ НА HUSL

Пропадает объект по клику на него

Ответы (1 шт):