Programmiererforum

Ich habe ein Problem mit der Navigation Dropdown auf meiner Website, die ich fast gelöst habe, aber nicht ganz beheben kann. Ich mache mir Sorgen, dass ich gerade ein Chaos aus meinem Code gemacht habe. Das Menü würde nicht geschlossen, wenn Sie nicht auf die Schaltfläche Menü geklickt haben. Ich habe es endlich geschlossen, nachdem Sie auf einen der Links geklickt haben, aber jetzt ist dies die einzige Möglichkeit, ihn zu schließen. Wie kann ich es schließen, wenn ich auf die Menüschaltfläche oder irgendwo anders auf der Site klicke? Ich bin mir sicher


Home
About
Services
Work
Testimonials
Contact
Blog



< /code>

und die zugehörigen jQuery: < /p>

// 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();
});
});
< /code>

Dies ist das potenzielle Problem, das die anderen Funktionen verkleinert. < /p>

//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;
});
< /code>

Was in aller Welt sollte ich tun, um mein Menü zu beheben? Für die Funktion, die ich verwendet habe, um die Dropdown -Funktionalität hinzuzufügen, muss die Klasse "anzeigen" hinzugefügt werden, sobald das .dropbtn -Element geklickt und entfernt wird, wenn erneut geklickt wird. />
Update 2: Versuchen Sie eine andere Methode. Ignorieren Sie dieses erste Update.