Добавить click к body [дубликат]

// Бинд кнопки 
$('.togglebtn').click(() => { 
  if (checkIsOpened()) { 
    closeMenu() 
  } else { 
    openMenu() 
  } 
}) 
 
// Бинд документа 
$(document).click(event => { 
  // Здесь мы проверяем, что мы кликнули не по кнопке открытия меню  
  // или её внутренностям 
  if (!$(event.target).is('.togglebtn, .togglebtn *')) { 
    closeMenu() 
  } 
}) 
 
// Возврващает состояние меню 
function checkIsOpened() { 
  return !!$('.togglebtn').data('opened') 
} 
 
// Закрывает меню 
function closeMenu() { 
  $('.togglebtn').data('opened', false) 
  $('#menustate').text('Закрыто') 
} 
 
// Открывает меню 
function openMenu() { 
  $('.togglebtn').data('opened', true) 
  $('#menustate').text('Открыто') 
}

.togglebtn { 
  display: inline-block; 
  padding: 3px 7px; 
  background: #555; 
  cursor: pointer; 
  color: #fff; 
  user-select: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<span class="togglebtn"> 
  Меню: <span id="menustate">Закрыто</span> 
</span>

var btn = $('.openclosebtn'); 
 
btn.click(function() { 
  if (!btn.data('status')) { 
    btn.html('Close'); 
    btn.data('status', true); 
  } else { 
    btn.html('Меню'); 
    btn.data('status', false); 
  } 
}); 
 
$(document).mouseup(function(e) { 
  if (!btn.is(e.target) && // если кнопка - не цель клика 
    btn.has(e.target).length === 0 && // и кнопка не содержит в себе цель клика 
    btn.data('status')) { // и status = true 
    btn.html('Меню'); 
    btn.data('status', false); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="main"> 
  <span class="openclosebtn">Меню</span> 
</div>

$(() => { 
  let menuIsOpen = false; 
  const $body = $('body'), 
    $menu = $('.menu'), 
    $menuButton = $menu.find('.openclosebtn'); 
     
    $menuButton.on('click', toggleMenu); 
     
    function toggleMenu() { 
      if(!menuIsOpen) menuShow(); 
      else menuHide(); 
    } 
     
    function menuShow() { 
      $menuButton.html('Close'); 
      $menu.addClass('show'); 
      $body.on('click', menuHideOnBodyClick); // Когда меню открыто, вешаем обработчик клика по body 
      menuIsOpen = true; 
    } 
     
    function menuHide() { 
      $menuButton.html('Меню'); 
      $menu.removeClass('show'); 
      $body.off('click', menuHideOnBodyClick); // Когда меню закрыто, отключаем обработчик клика по body 
      menuIsOpen = false; 
    } 
     
    function menuHideOnBodyClick( e ) { 
      const $elem = $(e.target); 
      /* 
      * Проверяем является ли то на что мы кликнули нашим меню 
      * или чем-то дочерним для него, 
      * если нет, то закрываем меню 
      */ 
      if(!$elem.closest('.menu').length) menuHide(); 
    } 
});

body { height: 500px; } 
.menu { width: 140px; } 
.menu_content { display: none; } 
.menu.show .menu_content { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="main"> 
  <div class="menu"> 
    <span class="openclosebtn">Меню</span> 
    <div class="menu_content"> 
      <ul> 
      <li>Menu Item</li> 
      <li>Menu Item</li> 
      <li>Menu Item</li> 
      <li>Menu Item</li> 
      <li>Menu Item</li> 
      </ul> 
    </div> 
  </div> 
</div>