/wsr/ - Worksafe Requests » Thread #1531257

[3 / 1 / 1]

37KiB, 779x288, Screenshot 2025-06-25 014153.png

JAVASCRIPT NAVIGATION HELP

Anonymous Tue 24 Jun 2025 15:46:39 No.1531257 View View Reply Original Report

Quoted By:

Help with my javascript navigation for clickable dropdowns in a nav.
> There are multiple dropdown divs in this nav.
> Clickable compared to displayed css for mobile friendly use.

Can't seem to find a way to get this to work

SOURCE

SOURCE Tue 24 Jun 2025 15:52:28 No.1531258 Report

Quoted By:

<nav>
<div class="dropdown">
<button class="dropmain">DROPDOWN <i class="fa fa-caret-down"></i> </button>
<div class="dropdown-links">
<a href="/link1">Link One</a>
<a href="/link2">Link Two</a>
<a href="/link3">Link Three</a>
</div> 
</div> 
</nav>

<script>
document.querySelectorAll("nav .dropdown .dropmain").addEventListener("click", function() {
var innerDiv = document.querySelectorAll("nav .dropdown:hover .dropdown-links");
if (innerDiv.style.display === "none") { innerDiv.style.display = "block";
}
});
</script>

Anonymous

Anonymous Wed 25 Jun 2025 05:00:06 No.1531328 Report

Quoted By:

.dropdown-links is a child of .dropdown, if you click on the links it'll propagate back up and cause it to toggle

Add the listener to .dropmain only or use the children selector ("nav > .dropdown > .dropmain")

Capcode	All Only User Posts Only Verified Posts Only Moderator Posts Only Manager Posts Only Admin Posts Only Developer Posts Only Founder Posts
Show Posts	All Only With Images Only Without Images Only Spoiler Images Only Non-Spoiler Images
Deleted Posts	All Only Deleted Posts Only Non-Deleted Posts
Ghost Posts	All Only Ghost Posts Only Non-Ghost Posts
Post Type	All Only Sticky Threads Only Opening Posts Only Reply Posts
Results	All Grouped By Threads
Order	Latest Posts First Oldest Posts First

On these archives

Your latest searches

JAVASCRIPT NAVIGATION HELP