navbar-expand-collapse.js
1 document.addEventListener("DOMContentLoaded", () => { 2 const items = Array.from(document.querySelectorAll(".navbar-item")); 3 4 items.forEach((item, i) => { 5 const level = getLevel(item); 6 const next = items[i + 1]; 7 8 if (next && getLevel(next) > level) { 9 item.classList.add("has-children"); 10 11 const href = item.getAttribute("href"); 12 const text = item.textContent; 13 14 // Clear content and remove href from parent 15 item.textContent = ""; 16 item.removeAttribute("href"); 17 18 const toggle = document.createElement("span"); 19 toggle.className = "toggle-label"; 20 toggle.textContent = text; 21 item.appendChild(toggle); 22 23 // Mini-link button (arrow symbol) 24 const openBtn = document.createElement("a"); 25 openBtn.className = "mini-link"; 26 openBtn.href = href; 27 openBtn.target = item.getAttribute("target") || "_self"; 28 openBtn.textContent = "➞"; // Changed arrow symbol 29 openBtn.style.display = "inline-block"; 30 item.appendChild(openBtn); 31 32 // Toggle event 33 toggle.addEventListener("click", (e) => { 34 e.preventDefault(); 35 item.classList.toggle("open"); 36 37 let j = i + 1; 38 while (j < items.length && getLevel(items[j]) > level) { 39 const subItem = items[j]; 40 const subLevel = getLevel(subItem); 41 42 if (item.classList.contains("open")) { 43 subItem.style.display = subLevel === level + 1 ? "block" : "none"; 44 } else { 45 subItem.style.display = "none"; 46 subItem.classList.remove("open"); 47 } 48 j++; 49 } 50 }); 51 52 // Start collapsed 53 let j = i + 1; 54 while (j < items.length && getLevel(items[j]) > level) { 55 items[j].style.display = "none"; 56 j++; 57 } 58 } 59 }); 60 61 function getLevel(el) { 62 const cls = Array.from(el.classList).find(c => c.startsWith("level-")); 63 return cls ? parseInt(cls.split("-")[1]) : 0; 64 } 65 });