fix javascript

wiki/menu.html

@@ -135,44 +135,84 @@
   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){
+  // 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";
+  //     } 
+  // }
+  function over(el) {
+    resetColors();
+    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){
+        son.style.display = "block";
+        setTimeout(() => {
+            son.style.opacity = 1;
+            navbox.style.height = getNavboxHeight();
+        }, 0); // No delay for smoother operation
+    }
+}
+
+function leave(el) {
+    resetColors();
+    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";
-      } 
-  }
+        son.style.opacity = 0;
+        setTimeout(() => {
+            son.style.display = "none";
+            navbox.style.height = "78px";
+        }, 300); // Delay matches the CSS transition
+    }
+}
+
+function resetColors() {
+    for (let i = 0; i < 4; i++) {
+        items[i].children[0].style.color = "#185A4F";
+    }
+}
+
+function getNavboxHeight() {
+    if (document.documentElement.clientWidth > 1400) {
+        return "320px";
+    } else if (document.documentElement.clientHeight < 1120) {
+        return "245px";
+    } else {
+        return "280px";
+    }
+}
 </script>