Закройте скользящий DIV нажав вне его

Question

я потратил часы, чтобы найти решение моей проблемы, но ничего не получалось еще:/

Я сделал this pen, который работает отлично. Это базовое скользящее меню с кнопкой открытия/закрытия (основано на этом jsfiddle), но мне нравится добавлять функцию, которая позволяет пользователям закрывать меню, щелкая в любом месте за его пределами.

Вот код:

HTML

<div class='header'> 
    <span class='button'>&#9776;</span> 
    <span class="logo">LOGO HERE</span> 
</div> 
<div class='side-panel'> 
    <nav> 
    <ul> 
     <li><a href='#'>ITEM 1</a></li> 
     <li><a href='#'>ITEM 2</a></li> 
     <li><a href='#'>ITEM 3</a></li> 
    </ul> 
    </nav> 
</div> 
<div class='content'>CONTENT HERE</div> 

JS

$('.button').click(function(){ 
    if($(this).hasClass('active')){ 
    $(this).removeClass('active'); 
     $(this).html("☰"); 
    $('.side-panel').animate({ 
    right:"-220px" 
    }); 
    $(this).animate({ 
    right:"0" 
    }); 
    } 
    else{ 
    $(this).addClass('active'); 
    $(this).html("╳"); 
    $('.side-panel').animate({ 
    right:"0", 
    }); 
    $('.button').animate({ 
    right:"220px" 
    }); 
    } 
}); 

я нашел очень интересную тему здесь, и я попытался добавить следующее:

$(document).click(function(){ 
    if ($('.button').hasClass('active')){ 
    $(this).removeClass('active'); 
    } 
}); 

но не работает. Мои знания с Js являются основными (как мой английский (извините)), и я уверен, что я недалеко от решения, но я провел уже более 3 часов, и я начинаю отчаянно;) Надеюсь, что я был достаточно ясно, но если вам нужна дополнительная информация, не стесняйтесь спрашивать. Приветствия, и спасибо за вашу помощь.

CODEPEN

Answer 1

быстро и грязно:

действовать, как если нажата кнопка при нажатии на содержание:

$('.content').click(
    function() { 
     $(".button").click(); 
    }); 

лучше:

извлечь код из .button мыши событие в функции и вызовите это дважды:

$('.button').click(function(){ 
    showhide(); 
}); 

$('.content').click(function() { 
    showhide(); 
}); 

function showhide() 
{ 
    var $this = $(".button"); 
    if($this.hasClass('active')){ 
    $this.removeClass('active'); 
    $this.html("☰"); 
    $('.side-panel').animate({ 
    right:"-220px" 
    }); 
    $this.animate({ 
    right:"0" 
    }); 
    } 
    else{ 
    $this.addClass('active'); 
    $this.html("╳"); 
    $('.side-panel').animate({ 
    right:"0", 
    }); 
    $('.button').animate({ 
    right:"220px" 
    }); 
    } 
} 

Answer 2

Я, наконец, нашел решение. Я просто добавил это:

$('.content').click(function() { 
    if($('.button').hasClass('active')){ 
    $('.button').removeClass('active'); 
    $('.button').html("☰"); 
    $('.side-panel').animate({ 
    right:"-220px" 
    }); 
    $('.button').animate({ 
    right:"0" 
    }); 
    } 
}); 

Теперь любой щелчок по содержанию закрывает Диво .side-панель