von außerhalb Anklicken

Question

ich Stunden damit verbracht, eine Lösung für mein Problem zu finden, aber nichts funktionierte noch:/

I this pen gemacht, das funktioniert prima. Es ist ein einfaches gleitendes Menü mit einer Öffnen/Schließen-Taste (basierend auf dieser jsfiddle), aber ich möchte eine Funktion hinzufügen, die es Benutzern ermöglicht, das Menü zu schließen, indem sie irgendwo außerhalb davon klicken.

Hier ist der Code:

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" 
    }); 
    } 
}); 

fand ich einige sehr interessante Thema hier und ich versuchte, diese hinzuzufügen:

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

hat aber nicht funktioniert. Mein Wissen mit Js ist grundlegend (wie mein Englisch (Entschuldigung)), und ich bin ziemlich sicher, dass ich nicht weit von der Lösung bin, aber ich habe bereits mehr als 3 Stunden verbracht und ich fange verzweifelt an;) Ich hoffe ich war Klar genug, aber wenn Sie mehr Details benötigen, zögern Sie nicht zu fragen. Prost, und danke für deine Hilfe.

CODEPEN

Answer 1

quick and dirty:

handeln, als ob die Taste gedrückt wird, wenn Sie auf Inhalt klicken:

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

besser:

extrahieren Sie den Code aus .Taste Klick Ereignis in einer Funktion und rufen Sie das zweimal:

$('.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

Ich habe endlich eine Lösung gefunden. Ich dies gerade hinzugefügt:

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

nun jeder Klick in den Inhalt schließt die div .side-Panel