change navbar js

wiki/menu.html

@@ -132,68 +132,46 @@
   </ul>
 </nav>
 <script>
-  // var navbox = document.getElementById("navbox");
-  // let navbar = document.getElementById("my-navbar");
-  // let items = navbar.children;
-  // function over(el){
-  //     for (i = 0; i < 4; i++){
-  //         items[i].children[0].style.color = "#185A4F";
-  //     }
-  //     el.children[0].style.color = "#62D881";
-  //     if (el.children.length > 1){
-  //       let son = el.children[1];
-  //       if (getComputedStyle(son,null)["display"]=="none"){
-  //         setTimeout(function(){
-  //             son.style.opacity = 1;
-  //         }, 1);
-  //         son.style.display = "block";
-  //       }
-  //       if (document.documentElement.clientWidth > 1400){
-  //         navbox.style.height = "320px";
-  //       }
-  //       else if (document.documentElement.clientHeight < 1120){
-  //         navbox.style.height = "245px";
-  //       }
-  //       else{
-  //         navbox.style.height = "280px";
-  //       }
-  //     }
-  // }
-  // function leave(el){
-  //     for (i = 0; i < 4; i++){
-  //         items[i].children[0].style.color = "#185A4F";
-  //     }
-  //     if (el.children.length > 1){
-  //       let son = el.children[1];
-  //       if (getComputedStyle(son,null)["display"]=="block"){
-  //           son.style.opacity = 0;
-  //           setTimeout(function(){
-  //               son.style.display = "none";
-  //           }, 350);
-  //       }
-  //       navbox.style.height = "78px";
-  //     } 
-  // }
   var navbox = document.getElementById("navbox");
 let navbar = document.getElementById("my-navbar");
 let items = navbar.children;
 
-function over(el) {
-    resetColors();
-    el.children[0].style.color = "#62D881";
-    
-    // Show the current dropdown
+// Add click event listener to each dropdown menu item
+for (let i = 0; i < items.length; i++) {
+    let item = items[i];
+
+    // Check if the item has a dropdown (sub-menu)
+    if (item.children.length > 1) {
+        item.addEventListener('click', function (event) {
+            toggleDropdown(item);
+            event.stopPropagation(); // Prevent event bubbling
+        });
+    }
+}
+
+function toggleDropdown(el) {
+    // Toggle visibility of the dropdown
     let son = el.children[1];
     if (son) {
-        son.style.visibility = "visible";
-        son.style.opacity = 1;
-        el.classList.add('active');
-        adjustNavHeight();
+        if (son.style.visibility === "visible") {
+            closeDropdown(el);
+        } else {
+            openDropdown(el);
+        }
     }
 }
 
-function leave(el) {
-    // Close the current dropdown
+function openDropdown(el) {
+    // Open the dropdown
+    let son = el.children[1];
+    son.style.visibility = "visible";
+    son.style.opacity = 1;
+    el.classList.add('active');
+    adjustNavHeight();
+}
+
+function closeDropdown(el) {
+    // Close the dropdown
     let son = el.children[1];
     if (son) {
         son.style.opacity = 0;
@@ -220,5 +198,60 @@ function adjustNavHeight() {
         navbox.style.height = "280px";
     }
 }
+
+// Close dropdowns when clicking outside
+document.addEventListener('click', function () {
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].classList.contains('active')) {
+            closeDropdown(items[i]);
+        }
+    }
+});
+// var navbox = document.getElementById("navbox");
+// let navbar = document.getElementById("my-navbar");
+// let items = navbar.children;
+
+// function over(el) {
+//     resetColors();
+//     el.children[0].style.color = "#62D881";
+    
+//     // Show the current dropdown
+//     let son = el.children[1];
+//     if (son) {
+//         son.style.visibility = "visible";
+//         son.style.opacity = 1;
+//         el.classList.add('active');
+//         adjustNavHeight();
+//     }
+// }
+
+// function leave(el) {
+//     // Close the current dropdown
+//     let son = el.children[1];
+//     if (son) {
+//         son.style.opacity = 0;
+//         setTimeout(() => {
+//             son.style.visibility = "hidden";
+//             el.classList.remove('active');
+//             navbox.style.height = "78px"; // Reset the height
+//         }, 300); // Match this delay with the CSS transition time
+//     }
+// }
+
+// function resetColors() {
+//     for (let i = 0; i < items.length; i++) {
+//         items[i].children[0].style.color = "#185A4F";
+//     }
+// }
+
+// function adjustNavHeight() {
+//     if (document.documentElement.clientWidth > 1400) {
+//         navbox.style.height = "320px";
+//     } else if (document.documentElement.clientHeight < 1120) {
+//         navbox.style.height = "245px";
+//     } else {
+//         navbox.style.height = "280px";
+//     }
+// }
 </script>