Как закрыть div при клике вне этого diva

Question

Добры день, подскажите пожалуйста, как закрыть div при клике вне этого div

Код ниже:

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

$(document).click(function(e) {
    if ($(e.target).closest(res).length || $(e.target).length) return;
    res.fadeOut(100);
    e.stopPropagation();
});

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

.dropdown-menu {
        display: none;
        }

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

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

Answer 1

Вот вам пример реализации на чистом js

let dropDown = document.querySelector('.dropdown-menu')

let wrapper = document.querySelector('.wrapper')

wrapper.addEventListener('click', evt => {
  console.log(evt.target.className)
  if (evt.target.className === 'wrapper') {
    dropDown.classList.add('dropdown-menu--close')
  } else {
    dropDown.classList.remove('dropdown-menu--close')
  }
})

.dropdown-menu--close {
  display: none;
}

.wrapper {
  padding: 20px;
}

<div class="wrapper">
    <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>
  </div>

А вот на jquery

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

function funk(e) {
  console.log(e.target.classList)
  if (e.target.classList.contains('menu-burger')) {
    res.hide();
  } else {
    res.show();
  }
};

.menu-burger {
  padding: 20px;
}

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

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

Answer 2

Я решил этот вопрос через костыль, есть 3 функции:

function toggle_vis(menuid) {
var m = document.getElementById(menuid);
if (m.className.indexOf("w3-show") == -1) {
m.className += " w3-show";
} else {
m.className = m.className.replace(" w3-show", "");
}}


function open_vis(menuid) {
var m = document.getElementById(menuid);
if (m.className.indexOf("w3-show") == -1) {
m.className += " w3-show";
}}

function close_vis(menuid) {
var l = document.getElementById(menuid);
if (l.className.indexOf("w3-show") != -1) {
l.className = l.className.replace(" w3-show", "");
}}

Вот пример одного из дропдаунов

  <div class="w3-dropdown-click">
    <button onclick="close_vis('top-search');close_vis('top-language');close_vis('top-cart');toggle_vis('top-menu')" class=" w3-button"><img style="vertical-align:middle;" src="<?php echo $sys['init']['style_scheme'].'://'.$sys['init']['style_host'].'/basic/svg/menu-black-18dp.svg';?>"></button>
    <div id="top-menu" class="w3-dropdown-content w3-bar-block w3-card w3-animate-opacity">
<a href="#1" class="w3-bar-item w3-button">Главная</a>
<a href="#2" class="w3-bar-item w3-button">Услуги</a>
<a href="#3" class="w3-bar-item w3-button">Товары</a> 
<a href="#5" class="w3-bar-item w3-button">Контакты</a> 
    </div>
  </div>

А вот тут начинается тело сайта (то что ниже чем навигация)

<div class="topgradient w3-display-container w3-opacity-min" id="home" onclick="close_vis('top-menu');close_vis('top-search');close_vis('top-language');close_vis('top-cart');">

В качестве css я использую w3.css, данное решение удобно тем что может быть сколько угодно дропдаунов, при нажатии на который предыдущий закроется, кроме этого закроются все при нажатии на тело сайта. И мало того, их удобно раскрывать в случае необходимости используя js, к примеру раскрыть корзину при добавлении товара.

Answer 3

Модифицировал ваш код так:

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

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

БЛОГ НА HUSL

Как закрыть div при клике вне этого diva

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