Update file menu.html

wiki/menu.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Navigation Bar</title>
     <style>
-        .my-nav {
+     .my-nav {
     background-color: rgba(255, 228, 225, 0.95);
     padding: 10px 0;
     position: fixed;
@@ -22,7 +22,7 @@
 }
 
 .hamburger {
-    display: none; 
+    display: none; /* 默认隐藏 */
     font-size: 30px;
     cursor: pointer;
     margin-left: 15px;
@@ -99,6 +99,7 @@
     box-shadow: 0 4px 10px rgba(250, 128, 114, 0.3); 
 }
 
+/* 响应式设计 */
 @media (max-width: 768px) {
     .my-nav {
         height: auto;
@@ -107,16 +108,20 @@
     }
 
     .hamburger {
-        display: block;
+        display: block; /* 显示汉堡菜单 */
     }
 
     .my-navbar {
         flex-direction: column;
         align-items: flex-start;
-        display: none; 
+        display: none; /* 默认隐藏导航菜单 */
         width: 100%;
     }
 
+    .my-navbar.show-menu {
+        display: flex; /* 显示导航菜单 */
+    }
+
     .my-navbar > li {
         width: 100%;
         margin: 5px 0;
@@ -129,7 +134,7 @@
 
     .my-navbar > li > ul.son {
         position: static;
-        display: none; 
+        display: none; /* 默认隐藏子菜单 */
         width: 100%;
         opacity: 1;
         box-shadow: none;
@@ -139,7 +144,7 @@
     }
 
     .my-navbar > li.show > ul.son {
-        display: block;
+        display: block; /* 显示子菜单 */
     }
 
     .son li a {
@@ -226,25 +231,35 @@
                 }
             } 
         }
-        // 添加菜单切换功能
+        // 修改菜单切换功能
         function toggleMenu(){
             var navbar = document.getElementById('my-navbar');
-            if(navbar.style.display === 'flex' || navbar.style.display === ''){
-                navbar.style.display = 'none';
-            } else {
-                navbar.style.display = 'flex';
-            }
+            navbar.classList.toggle('show-menu');
         }
-        // 移动端点击展开子菜单
+
         var navItems = document.querySelectorAll('.my-navbar > li');
 
         navItems.forEach(function(item){
-            item.addEventListener('click', function(){
+            item.addEventListener('click', function(e){
                 if(window.innerWidth <= 768){
+                
+                    e.preventDefault();
                     this.classList.toggle('show');
                 }
             });
         });
+
+        // 监听窗口大小变化，重置导航菜单状态
+        window.addEventListener('resize', function() {
+            var navbar = document.getElementById('my-navbar');
+            if(window.innerWidth > 768){
+                navbar.classList.remove('show-menu');
+                // 移除所有菜单项的 'show' 类
+                navItems.forEach(function(item){
+                    item.classList.remove('show');
+                });
+            }
+        });
     </script>
 </body>
 </html>
\ No newline at end of file