Schließen Sie das Dropdown-Menü, wenn Sie außerhalb davon klicken ⇐ HTML

[Anonymous]

Ich habe ein Problem mit dem Navigations-Dropdown auf meiner Website, das ich fast gelöst habe, aber nicht ganz lösen kann. Ich mache mir Sorgen, dass ich gerade meinen Code durcheinander gebracht habe.

Als ich mit einem PreventDefault-Ereignis eine Funktion zum Scrollen zu Anker-Tags eingeführt habe, hat dies mein Navigationsmenü kaputt gemacht. Das Menü würde sich erst schließen, wenn Sie erneut auf die Menüschaltfläche geklickt hätten. Ich habe es endlich geschafft, es zu schließen, nachdem Sie auf einen der Links geklickt haben, aber das ist jetzt die einzige Möglichkeit, es zu schließen. Wie schließe ich es, wenn ich auf die Menüschaltfläche oder irgendwo anders auf der Website klicke? Ich bin mir sicher, dass dieser Teil von jQuery der Übeltäter ist, weiß aber nicht, wie ich ihn beheben oder umgehen kann.

HTML für das Menü:

Code: Select all

[i][/i]

[url=#home]Home[/url]
[url=#about]About[/url]
[url=#services]Services[/url]
[url=#work]Work[/url]
[url=#testimonials]Testimonials[/url]
[url=#contact]Contact[/url]
[url=http://blog.ignitiondesignpdx.com]Blog[/url]

Und die zugehörige jQuery:

Code: Select all

// When the user clicks on the button, toggle between hiding and showing the dropdown content
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

//// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
dropdowns.forEach(function (openDropdown) {
dropdown.classList.contains('show') && dropdown.classList.remove('show');
});
}
};

////This is the section I made for it to close after clicking a link
jQuery(document).ready(function ($) {
$('.dropbtn').on('click', function () {
$(".dropdown-content").show();
});
$('.navlink').on('click', function () {
$(".dropdown-content").hide();
});
});

Dies ist das potenzielle Problem, das die anderen Funktionen durcheinander bringt.

Code: Select all

//Scroll to anchor tags
$(document).on('click', 'a:not(.external)', function (event) {
event.preventDefault();

$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});

var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});

Was in aller Welt soll ich tun, um mein Menü zu reparieren?

Sie können einen Blick auf die Work-in-Progress-Website unter http://idpdx.kreigd.com werfen.

Update: Ich glaube, ich habe einen Hinweis darauf, wo die Dinge durcheinander geraten. Die Funktion, die ich verwende, um die Dropdown-Funktionalität hinzuzufügen, erfordert, dass die Klasse „show“ hinzugefügt wird, sobald auf das .dropbtn-Element geklickt wird, und entfernt wird, wenn erneut darauf geklickt wird.

Was ich also wirklich tun muss, ist den Code so zu überarbeiten, dass durch Klicken auf .dropbtn das Dropdown geöffnet wird und durch Klicken auf alles andere, einschließlich der Navigationsschaltflächen und des .dropbtn-Elements, es geschlossen wird.

Update 2: Versuchen Sie es mit einer anderen Methode. Ignorieren Sie das erste Update.