So schließen Sie eine Seitenleiste, wenn ich irgendwo gedrückt

Question

Was ich tun möchte, ist die Sidebar zu schließen, wenn ich irgendwo auf dem Bildschirm drücken.

Wie kann es gemacht werden? Wie kann ich es so machen, dass, wenn ich über mein Bild schwebe, mein Text erscheint, anstatt dass er die ganze Zeit sichtbar ist?

function openNav() { 
 
    document.getElementById("mySidenav").style.width = "300px"; 
 
    document.getElementById("toggle").style.position = "static"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementById("toggle").style.marginRight = "0"; 
 
    document.getElementById("toggle").style.position = "relative"; 
 
}

#toggle { 
 
    position: relative; 
 
    left: 400px; 
 
    font-size: 1.2em; 
 
    visibility: visible; 
 
} 
 

 
#toggle:hover { 
 
    color: white; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: transparent; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 50px; 
 
} 
 

 
.sidenav a { 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.sidenav a:hover, 
 
.offcanvas a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
}

<div> 
 
    <ul id="topBar"> 
 
    <li id="ixora">Ixora</li> 
 
    <li class="lists">2014</li> 
 
    <li class="lists">2015</li> 
 
    <li id="toggle" onclick="openNav() ">&#9776;</li> 
 
    </ul> 
 
</div> 
 

 
<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <span class="textImage">Outing</span> 
 
    <a href="#" class="images"><img src="outing.jpg"></a> 
 

 
    <span class="textImage">Prom Night</span> 
 
    <a href="#" class="images"><img src="prom.jpg"></a> 
 

 
    <span class="textImage">PortDickson Trip</span> 
 
    <a href="#" class="images"><img src="pd.jpg"></a> 
 

 
    <span class="textImage">Merdeka</span> 
 
    <a href="#" class="images"><img src="merdeka%20(2).jpg"></a> 
 
</div>

Answer 1

Ich denke ehrlich, sollten Sie jQuery verwenden hier, wie es für die DOM-Manipulation ist fantastisch. Wenn Sie aus irgendeinem Grund Vanille js verwenden müssen, dann wird es ein wenig komplizierter.

Hinzufügen von jQuery zu Ihrem Projekt ist einfach und gut auf der jQuery site erläutert. Hier; sa Vergleich zum Auswählen eines Elements in js/jquery:

Vanille JS:

document.getElementById("mySidenav") 

jQuery:

$('#mySidenav') 

Um die Dinge zu passieren, wenn Ereignisse eintreten (dh Taste drücken, oder Wenn Sie von einem Menü wegklicken) richten Sie Event-Handler ein.

Es ist schwer, sich aus Ihrem Code vorzustellen, da CSS für #topBar fehlt, daher kann ich Ihre Site nicht gut sehen (hier ist Ihr Code running in jsfiddle).

Aber sagen wir, Sie haben eine Schaltfläche mit der ID #openToggle. Sie würden Ihre SideNav in CSS mit der richtigen Breite, Höhe, usw. einrichten, und es als Anzeige lassen: keine.Dann erstellen wir einen Event-Handler, um etwas zu tun, wenn Sie auf diese Schaltfläche klicken: // Event-Handler gehen am Ende Ihrer js-Datei oder Skript-Tag $ ('# openMenu'). On ('click', openMenu);

Dieses Beispiel sagt im Grunde, wenn das Element mit der ID 'openMenu' 'angeklickt' ist, führen Sie die 'openMenu' Funktion - einfach! :)

Die OpenMenu Funktion würde in etwa so aussieht (einfaches Beispiel):

function openMenu() { 
    var $menu = $('#sideNav'); 
    $menu.show(); 
}; 

Eine bessere Möglichkeit wäre, eine Umschaltfunktion zu haben, die das Menü wechselt je nachdem, ob es bereits offen oder geschlossen:

In Bezug auf das Schließen des Menüs, wenn Sie wegklicken, können Sie einen Ereignishandler an den Text der Seite binden und jQuery.one() -Funktion verwenden (wird nur einmal ausgeführt), die erkennen, ob der Körper ist Klicken Sie auf und dann auf das MenüToggle-Funktion - Sie würden mit 2 Han enden dlers hierfür:

// event handler for menu toggle button 
$('#menuToggle').on('click', toggleMenu); 
$('body').one('click', toggleMenu); 

Alternativ können Sie das Menü schließen, wenn Sie mit dem Mauszeiger das Menü verlässt ?:

//event handlers 
$('#menuToggle').on('click', toggleMenu); 
$('#sideNav').mouseleave(toggleMenu); 

Der mouseleave-Handler im Grunde sagen, sobald der Mauszeiger das Element mit ID verlässt von 'sideNav' führen Sie dann die Funktion toggleMenu aus.

Ich bin auch ein newb, also meine Beispiele mögen nicht groß sein, aber ich hoffe, dass ich mindestens ein wenig geholfen habe. Hoffentlich werden einige echte Javascript Devs in Kürze dazukommen oder bessere Beispiele geben.

Cheers, Dave

Answer 2

Mit Javascript, können Sie wie folgt vorgehen:

document.onclick = function(e){ 
    if(e.target.id == "mySidenav"){ 
     return false; 
    } 

    closeNav(); 
} 

Answer 3

JQuery

$(document).onclick(function() { 
    $("#mySidenav").hide(); 
} 

Referenzdokumentation:

• JQuery .on
• JQuery .hide

Answer 4

Ich sehe, dass Sie bereits Funktionen der Sidebar zu öffnen und zu schließen,

Klicken „überall“ ist das gleiche wie „auf dem Körper zu klicken“, aber Ich vermute, dass Sie nicht möchten, dass Ihre Sidebar geschlossen wird, wenn Sie darauf klicken.

So, hier ist was Sie tun können:

var myNav = document.getElementById("mySidenav"); 

myNav.onclick = function(e) { 
    e.stopPropagation(); 
} 

document.body.onclick = function(e) { 
    closeNav(); 
} 

Also, wenn Sie auf der Sidebar klicken, werden Sie nicht auf den Körper klicken, weil das Ereignis Ausbreitung gestoppt wird, und wenn Sie an anderer Stelle klicken, es wird deine Sidebar schließen.

Hoffe, dass es hilft,

freundlichen Grüßen