Закрыть выпадающий список

Question

Если список открыт то в классе появляется active. Как закрыть список кликнув вне его?

$('.menu').on('click', function() { 
    $(this).toggleClass('active'); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="menu active">
  <div class="user-name">
    <?=$name?>
  </div>
  <ul>
    <li><a href="">Войти</a></li>
    <li><a href="">Выйти</a></li>
  </ul>
</div>

Answer 1

Допустим так:

let isActive = false;

$('.menu').on('click', function() {
  $(this).toggleClass('active');
  isActive = $(this).hasClass('active');
});

$(document).mouseup(function(e) {
  if(isActive === true) {
    let s = $('.menu.active');
    if(!s.is(e.target) && s.has(e.target).length === 0)
      s.removeClass('active');
  }
});

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="menu active">
  <div class="user-name">
    <?=$name?>
  </div>
  <ul>
    <li><a href="">Войти</a></li>
    <li><a href="">Выйти</a></li>
  </ul>
</div>

БЛОГ НА HUSL

Закрыть выпадающий список

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