Schließen eines Overlays mit einem A href

Ich habe ein Navigations-Overlay und was ich tun möchte, ist die Navigation zu schließen, wenn auf einen Link geklickt wird. Es funktioniert mit href="#" aber meine Verbindungen sind href="someplace.com". Wie kann ich den Link schließen, während ich noch den href benutze?Schließen eines Overlays mit einem A href

`<script> 
$(document).ready(function(){ 
$(".menu-wrapper a").click(function(){ 
$(".overlay").fadeToggle(200); 
$(this).toggleClass('btn-open').toggleClass('btn-close'); 
}); 
}); 
$('.overlay').on('click', function(){ 
$(".overlay").fadeToggle(200); 
$(".menu-wrapper a").toggleClass('btn-open').toggleClass('btn-close'); 
open = false; 
}); 
</script>`

und der Link ist

`<li><a class="btn-close" href="<?php echo SITE_URL; ?>profiles">Profiles</a></li>`

Vielen Dank für jede Hilfe.

Quelle

2017-07-20 Nick Galgay

Wenn der Link hat href = "#" Seite wird nicht neu geladen, sonst würde es. Sie könnten dies tun:

<li><a class="btn-close" href="javascript:void(0)" onclick="closeOverlay()">Profiles</a></li>

dann eine Funktion schreiben

function closeOverlay() {...}

, wo Sie die Overlay schließen und AJAX rufen Sie Ihre PHP-Daten zu erhalten

Quelle

2017-07-20 00:58:01

Mein JQuery ist rostig

$('.some-class-for-all-nav-links').click(function() { 
// select the nav and close it with css or javascript 
})

Quelle

2017-07-20 01:00:07 arodjabel

Ereignisse in einer Browser-Kaskade nach unten und dann nach oben. Sagen Sie bitte die folgende Struktur haben: window, html, body, section, p, a, a, p, section, body, html, window:

<html> 
    <head>...</head> 
    <body> 
    <section> 
     <p>Here is a <a href="#sample">link</a></p> 
    </section> 
    </body> 
</html>

Wenn Sie auf den Link klicken, wird das click Ereignis zu jedem Ereignis-Listener Elemente in dieser Reihenfolge gebunden gesendet wird. Ob ein Ereignis eintritt, wenn das Ereignis von oben nach unten (beim Capture) oder von unten nach oben (beim Blasen) passiert, wird durch Setzen des booleschen Parameters onCapture auf den Aufruf addEventListener festgelegt.

Sie könnten ein Ereignis an das HTML-Dokument binden, das bei der Erfassung ausgelöst wird, prüft, ob der Benutzer auf einen Link geklickt hat, und wenn dies der Fall ist, schließen Sie das Nav oder was auch immer Sie tun möchten. Ich glaube nicht, dass jquery Event-Capturing unterstützt, du musst es im Vanilla-Stil machen.

Hier ist ein paar JS nach meinem Beispiel. Dies fügt dem gesamten Dokument einen Ereignis-Listener hinzu, der ausgelöst wird, wenn ein Klick erkannt wird. Es prüft dann, ob das Objekt, auf das geklickt wurde, tatsächlich ein Link ist (<a> Element).

document.addEventListener('click', function (e) { 
    if (e.target.tagName === 'A') { 
    alert("You've just clicked a link"); 
    } 
}, true); // true to trigger on 'capture'

https://jsfiddle.net/gf9drum2/

Quelle

2017-07-20 01:29:59

Ich danke Ihnen für Ihr Feedback, ich implementieren jedoch nicht die jquery Fähigkeiten benötigt, was Sie vorschlagen. Nochmals vielen Dank für Ihre Zeit. –

@NickGalgay Es ist nicht JQuery, aber Vanille JS, die Sie brauchen. Ich werde die Antwort mit dem tatsächlichen Code bearbeiten, da ich gute Laune habe :) –

Schließen eines Overlays mit einem A href

Antwort

Verwandte Themen