Закрыть меню jQuery, управляемое .slideToggle при нажатии снаружи

Question

Я видел несколько похожих вопросов, но моя функция открытия / закрытия меню управляется функцией slideToggle (), а не классом, и я бы не стал менять свой CSS, чтобы он работал.

Iнужно, чтобы меню закрывалось, когда пользователь нажимает в любом месте на странице.

HTML:

<div class="select">
    <button class="select__selector">Reveal menu</button>
    <ul class="select__select">
        <li class="select__option"><a></a></li>
        <li class="select__option"><a></a></li>
        ...
    </ul>
</div>

JS:

var langTrigger = jQuery('.select__selector');
var langList = jQuery('.select__select');

// Trigger active state.
langTrigger.click(function() {
    langTrigger.toggleClass('open');
    langList.slideToggle(200);
});

// Close list when page is loading.
langList.click(function() {
    langTrigger.click();
});

Я пробовал несколько вещейно это было так близко, как я получил.

if((langTrigger).hasClass('open')) {
     jQuery('body').on('click', function() {
         langList.css({display: 'none'});
     });
}

Answer 1

добавьте div и разместите его над всем вашим сайтом следующим образом:

<div class="overlay"</div>

.overlay{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

, затем примерно так:

    $('.opensmenu').click(function(){
         $('.menu').toggle();
         $('.overlay').show();
    });

    $('.overlay').click(function(){
         $('.menu').hide();
         $(this).hide();
    });