Update file menu.html

wiki/menu.html

@@ -206,81 +206,96 @@
     </nav>
 
     <script>
-        function toggleMenu(){
-            var navbar = document.getElementById('my-navbar');
-            navbar.classList.toggle('show-menu');
-        }
+        document.addEventListener('DOMContentLoaded', function() {
+    function toggleMenu(){
+        var navbar = document.getElementById('my-navbar');
+        navbar.classList.toggle('show-menu');
+    }
 
-        var navItems = document.querySelectorAll('.my-navbar > li');
+    var navItems = document.querySelectorAll('.my-navbar > li');
 
-        navItems.forEach(function(item){
-            item.addEventListener('click', function(e){
-                if(window.innerWidth <= 768){
-                    if(this.querySelector('.son')){
-                        e.preventDefault();
-                        this.classList.toggle('show');
-                    }
+    navItems.forEach(function(item){
+        item.addEventListener('click', function(e){
+            if(window.innerWidth <= 768){
+                if(this.querySelector('.son')){
+                    e.preventDefault();
+                    this.classList.toggle('show');
                 }
-            });
+            }
         });
+    });
 
-        document.addEventListener('click', function(e){
+    // 新增：处理子菜单项的点击事件
+    var subMenuItems = document.querySelectorAll('.son li a');
+    subMenuItems.forEach(function(item) {
+        item.addEventListener('click', function(e) {
             if(window.innerWidth <= 768){
-                var navbar = document.getElementById('my-navbar');
-                var hamburger = document.querySelector('.hamburger');
-                if(!navbar.contains(e.target) && e.target !== hamburger){
-                    navbar.classList.remove('show-menu');
-                    navItems.forEach(function(item){
-                        item.classList.remove('show');
-                    });
-                }
+                e.stopPropagation(); // 阻止事件冒泡到父元素
             }
         });
+    });
 
-        window.addEventListener('resize', function() {
+    document.addEventListener('click', function(e){
+        if(window.innerWidth <= 768){
             var navbar = document.getElementById('my-navbar');
-            if(window.innerWidth > 768){
+            var hamburger = document.querySelector('.hamburger');
+            if(!navbar.contains(e.target) && e.target !== hamburger){
                 navbar.classList.remove('show-menu');
                 navItems.forEach(function(item){
                     item.classList.remove('show');
                 });
             }
-        });
+        }
+    });
 
-        function over(el){
-            if(window.innerWidth > 768){
-                el.children[0].classList.add('active');
-                if (el.children.length > 1){
-                    let son = el.children[1];
-                    son.style.display = "block";
-                    setTimeout(function(){
-                        son.style.opacity = 1;
-                    }, 10);
-                }
-            }
+    window.addEventListener('resize', function() {
+        var navbar = document.getElementById('my-navbar');
+        if(window.innerWidth > 768){
+            navbar.classList.remove('show-menu');
+            navItems.forEach(function(item){
+                item.classList.remove('show');
+            });
         }
+    });
 
-        function leave(el){
-            if(window.innerWidth > 768){
-                el.children[0].classList.remove('active');
-                if (el.children.length > 1){
-                    let son = el.children[1];
-                    son.style.opacity = 0;
-                    setTimeout(function(){
-                        son.style.display = "none";
-                    }, 300);
-                }
-            } 
+    function over(el){
+        if(window.innerWidth > 768){
+            el.children[0].classList.add('active');
+            if (el.children.length > 1){
+                let son = el.children[1];
+                son.style.display = "block";
+                setTimeout(function(){
+                    son.style.opacity = 1;
+                }, 10);
+            }
         }
+    }
 
-        navItems.forEach(function(item){
-            item.addEventListener('mouseover', function(){
-                over(this);
-            });
-            item.addEventListener('mouseleave', function(){
-                leave(this);
-            });
+    function leave(el){
+        if(window.innerWidth > 768){
+            el.children[0].classList.remove('active');
+            if (el.children.length > 1){
+                let son = el.children[1];
+                son.style.opacity = 0;
+                setTimeout(function(){
+                    son.style.display = "none";
+                }, 300);
+            }
+        } 
+    }
+
+    navItems.forEach(function(item){
+        item.addEventListener('mouseover', function(){
+            over(this);
         });
+        item.addEventListener('mouseleave', function(){
+            leave(this);
+        });
+    });
+
+    // 将toggleMenu函数绑定到汉堡图标
+    document.querySelector('.hamburger').addEventListener('click', toggleMenu);
+});
     </script>
 </body>
 </html>
\ No newline at end of file