Seitenleiste ausblenden, wenn Sie auf eine beliebige Stelle auf der Seite klicken

Question

Ich habe eine animierte Seitenleiste, die angezeigt wird, wenn der Benutzer auf eine Hamburger-Schaltfläche klickt. Hier ist die Struktur:

$('#nav-toggle').click(function() { 
 
    if($('#nav-toggle').hasClass('active')){ 
 
    $('.menu').animate({ 
 
     right: "0px" 
 
    }, 200); 
 
    }else{ 
 
    $('.menu').animate({ 
 
     right: "-285px" 
 
    }, 200); 
 
    } 
 

 
});

.menu{ 
 
    right:-285px; 
 
    height:100%; 
 
    position: fixed; 
 
    width: 285px; 
 
    z-index: 1; 
 
    background-color: #111111; 
 
} 
 
.menu ul { 
 
    border-top: 1px solid #636366; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #636366; 
 
    font-family: 'Open Sans', sans-serif; 
 
    line-height: 45px; 
 
    padding-bottom: 3px; 
 
    padding-left: 20px; 
 
    padding-top: 3px; 
 
} 
 
.menu li a{ 
 
    color:white; 
 
}

<div class="menu"> 
 
     <!-- Menu --> 
 
     <ul> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Help</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div>

Eigentlich können wir Menü öffnen, indem #nav-toggle Element Klick auf und es in der Nähe auch auf dieses Element klicken. Ich möchte dem Benutzer erlauben, dieses Menü zu schließen, indem er irgendwo auf die Seite klickt. Wie kann ich das tun? Ich versuchte mit e.preventDefault(); in meiner if-Anweisung, aber es funktioniert nicht.

Danke!

Answer 1

ich schlage vor, 01.239.649 zu verwendenVerfahren und animieren sie von transition: .2s zu Ihrem .menu, Arbeitsbeispiel Zugabe:

$('#nav-toggle').click(function(e) { 
 
    e.stopPropagation(); 
 
    $(".menu").toggleClass('bar') 
 
}); 
 
$('body').click(function(e) { 
 
    if ($('.menu').hasClass('bar')) { 
 
    $(".menu").toggleClass('bar') 
 
    } 
 
})

.menu { 
 
    right: -285px; 
 
    height: 100%; 
 
    position: fixed; 
 
    width: 285px; 
 
    z-index: 1; 
 
    background-color: #111111; 
 
    transition: .2s 
 
} 
 

 
.menu ul { 
 
    border-top: 1px solid #636366; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    border-bottom: 1px solid #636366; 
 
    font-family: 'Open Sans', sans-serif; 
 
    line-height: 45px; 
 
    padding-bottom: 3px; 
 
    padding-left: 20px; 
 
    padding-top: 3px; 
 
} 
 

 
.menu li a { 
 
    color: white; 
 
} 
 

 
.bar { 
 
    right: 0px; 
 
} 
 

 
body, 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="nav-toggle">Click me</button> 
 
<div class="menu"> 
 
    <!-- Menu --> 
 
    <ul> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Blog</a></li> 
 
    <li><a href="#">Help</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    </ul> 
 
</div>

Answer 2

Sie können einen übergeordneten Abschnitt zu Ihrer Seite hinzufügen und ein Click-Ereignis anhängen gleiche wie Sie mit # nav-Toggle getan haben, so etwas wie dieses

$('.parent-section').click(function() { 
if($('#nav-toggle').hasClass('active')){ 
    $('.menu').animate({ 
    right: "0px" 
    }, 200); 
} else { 
    $('.menu').animate({ 
    right: "-285px" 
    }, 200); 
} 

}); 

Oder Sie können diese direkt an Body-Tag hinzufügen, wenn Sie werden dieses i mit Abschnitt nicht Körper gehen vorschlagen zu benutzen, hoffe, dies wird Ihnen helfen :)

Answer 3

dies versuchen, wird es immer Fell Benutzer klickt auf Körper

$(document).on('click',function(){ 
    if($("#nav-toggle").hasClass("active")){ 
      $('.menu').animate({ right: "-100%" }, 200); 
     } 
}); 

Answer 4

i Ihr Code leicht bearbeitet haben:

hier ist sie:

$('#nav-toggle').click(function(e) { 
    e.stopPropagation(); 
$('.menu').animate({right: "0px"}, 200);}); 
$(document).click(function(e){$('.menu').animate({right: "-285px"}, 200);}); 

https://jsfiddle.net/ndxqdqwc/

Answer 5

die Antwort des Gintoki Ergänzung

$('#nav-toggle').on('click', function(e) { 

    e.stopPropagation(); 

    $(".menu").toggleClass('bar'); 

    $('body').one('click', function(e) { 

    if ($('.menu').hasClass('bar')) { 
    $(".menu").toggleClass('bar') 
    } 

    }); 

}); 

Dies wird nur den Hörer aus dem Körper entfernen, so gut, dass es nicht jedes Mal ausgeführt wird.

Ich bin eigentlich nicht sicher, was für die Leistung besser ist, aber ich weiß nicht, wie die Tatsache, dass jeder Klick auf der Website durch, dass „wenn (hasClass)“ wird