Нажмите снаружи div и значок, div hide

Question

HTML:

<div class="menu-right">
  <img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
  <div class="menu-drop">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
    </ul>
  </div>
</div>

Jquery:

$("header .menu-icon").click(function() {
  $(".menu-drop").slideToggle();
});

CSS:

.menu-drop {
  display: none;
}

Я хочу, когда щелкнуть за пределами .menu-drop и .menu-icon затем .menu-drop div скрыть при нажатии на меню-div div он не будет скрываться.

Answer 1

Используйте mouseup с document, как показано ниже.

const $menu = $('.menu-icon, .menu-drop');
$(document).mouseup(e => {
  if (!$menu.is(e.target) &&
    $menu.has(e.target).length === 0) {
    $(".menu-drop").hide();
  }
});

$('.menu-icon').on('click', () => {
  $(".menu-drop").slideToggle();
});

.menu-drop {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
  <img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
  <div class="menu-drop">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
    </ul>
  </div>
</div>

Answer 2

Используйте один приемник событий на теле.Запросите цель события, покажите и спрятайте меню, как требуется.

$(document).ready(function() {
  /*Add event listener to document*/
  $(document).click(function(event) {
    //If the target is the icon, toggle the menu
    console.log(event.target);
    console.log($(event.target).closest(".menu-drop").length)
    if(event.target.matches(".menu-icon"))
    {
      $(".menu-drop").slideToggle();
    }
    //Otherwise if outside the menu, slide up
    else if($(event.target).closest(".menu-drop").length === 0 )
    {
      $(".menu-drop").slideUp();
    }
  });
});

.menu-drop {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
  <img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
  <div class="menu-drop">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
    </ul>
  </div>
</div>

Answer 3

Вот некоторые модификации

$(".menu-icon").click(function(e) { 
  $(".menu-drop").slideDown();
});

$(document).on('click', function (e) {
  if(!$(e.target).hasClass('menu-icon'))
    $(".menu-drop").slideUp();
});
 

.menu-drop {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
  <img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
  <div class="menu-drop">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
    </ul>
  </div>
</div>

Answer 4

При щелчке документа вы можете проверить, есть ли у выбранного элемента определенный класс или нет, если у него нет класса slideUp() в меню.Вы также должны предотвратить распространение события при нажатии на меню.

$(".menu-icon").click(function(e) {
  e.stopPropagation();
  $(".menu-drop").slideToggle();
});

$(document).click(function(e) {
  if(!$(e.target).hasClass('menu-right') && !($(e.target).hasClass('menu-drop')|| $(e.target).parents('.menu-drop').hasClass('menu-drop'))){
    $(".menu-drop").slideUp();
  }
});

.menu-drop {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
  <img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
  <div class="menu-drop">
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
    </ul>
  </div>
</div>