Jadi pada asasnya saya mempunyai menu yang mengembang apabila anda menuding di atasnya. Bagaimanakah saya boleh menulis semula kod saya supaya ia juga berkembang pada klik (kembangkan pada klik, runtuh pada klik sekali lagi)? Anda boleh menggunakan JavaScript jika perlu, tetapi saya telah cuba melakukan segala-galanya dengan hanya HTML dan CSS.
html, body {
font-family: Arial, Helvetica, sans-serif;
}
.navigation {
width: 300px;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
.submenu a {
background-color: #999;
}
.submenu a:hover {
background-color: #666;
}
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li><a href="">产品</a>
<ul class="submenu">
<li><a href="">上装</a></li>
<li><a href="">下装</a></li>
<li><a href="">鞋类</a></li>
</ul>
</li>
<li><a href="">其他</a>
<ul class="submenu">
<li><a href="">联系我们</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">常见问题</a></li>
</ul>
</li>
</ul>
</nav>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya membaca butiran soalan anda dengan teliti
Anda boleh cuba ikuti kod pembaikan berikut.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> html, body { font-family: Arial, Helvetica, sans-serif; } .navigation { width: 300px; } .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } .mainmenu a { display: block; background-color: #CCC; text-decoration: none; padding: 10px; color: #000; } .mainmenu a:hover { background-color: #C5C5C5; } .mainmenu li.active .submenu { display: block; max-height: 200px; } .submenu a { background-color: #999; } .submenu a:hover { background-color: #666; } .submenu { overflow: hidden; max-height: 0; -webkit-transition: all 0.5s ease-out; } </style> <body> <nav class="navigation"> <ul class="mainmenu"> <li><a href="javascript:;" onclick="showSubMenu(event)">产品</a> <ul class="submenu"> <li><a href="">上装</a></li> <li><a href="">下装</a></li> <li><a href="">鞋类</a></li> </ul> </li> <li><a href="javascript:;" onclick="showSubMenu(event)">其他</a> <ul class="submenu"> <li><a href="">联系我们</a></li> <li><a href="">关于我们</a></li> <li><a href="">常见问题解答</a></li> </ul> </li> </ul> </nav> </body> <script> function showSubMenu(e) { e.target.parentNode.classList.toggle('active'); } </script> </html>