我正在做一个菜单，其中子菜单选项随悬停显示。但这并不好，因为我无法点击第一个选项下的其他选项。
所以，我试图创建一个可点击下拉菜单，w3schools有一个页面用div解释这个，但我用<ul>和<li>来做这个我点击<li>元素，我把onclick没有任何反应。
那么，<ul>和<li>是否无法做到？如果有，怎么样？
<script type="text/javascript">
function myFunction() {
document.getElementById("primero").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script><style type="text/css">
html, body {
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
.cabecera{
position: relative;
left:50%;
margin-left: -472.5px;
}
/* define a fixed width for the entire menu */
.navigation {
position: relative;
width: 20%;
overflow: hidden;
margin-left: 2%;
margin-top: 2%;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu, .submenu1 {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #3e8525;
text-decoration: none;
padding: 10px;
color: white;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #009e1a;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
/*.mainmenu li:hover .submenu {
display: block;
max-height: 1300px;
}
*/
.submenu li:hover .submenu1 {
display: block;
max-height: 1090px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #4ba22c;
padding-left:10%;
display: block;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #009e1a;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 1s ease-out;
display: none;
position: absolute;
}
.submenu1 a {
background-color: #52b130;
padding-left:20%;
}
/* hover behaviour for links inside .submenu */
.submenu1 a:hover {
background-color: #009e1a;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu1 {
overflow: hidden;
max-height: 0;
-webkit-transition: all 1s ease-out;
}
li{
border:1px solid green;
}
.show {display:block;}
@media screen and (max-width: 1000px) {
.cabecera{
position: relative;
left:2%;
margin-left: 0px;
}
}
@media screen and (max-width: 840px) {
.navigation {
position: relative;
width: 195px;
overflow: hidden;
margin-left: 2%;
margin-top: 2%;
}
}
</style><nav class="navigation">
<ul class="mainmenu">
<li><a href="" onclick="myFunction()">Alimentacion y bebidas</a>
<ul class="submenu" id="primero">
<li><a href="">Alimentacion seca</a>
<ul class="submenu1">
<li><a href="">aceites</a></li>
<li><a href="">cafes y sucedaneos</a></li>
<li><a href="">infusiones</a></li>
<li><a href="">chocolates</a></li>
<li><a href="">cacao</a></li>
<li><a href="">azucar y edulcorantes</a></li>
<li><a href="">golosinas</a></li>
<li><a href="">salsas</a></li>
<li><a href="">sal, vinagre y especieas</a></li>
<li><a href="">reposteria</a></li>
<li><a href="">galletas</a></li>
<li><a href="">CEREALES DESAYUNO</a></li>
<li><a href="">PASTELERÍA Y BOLLERÍA INDUSTRIAL</a></li>
<li><a href="">PANADERÍA INDUSTRIAL</a></li>
<li><a href="">PASTAS</a></li>
<li><a href="">ARROCES</a></li>
<li><a href="">LEGUMBRES SECAS</a></li>
<li><a href="">SOPAS, CALDOS Y PURES</a></li>
<li><a href="">APERITIVOS PAT.FRITAS CORTEZA</a></li>
<li><a href="">FR.SECOS Y FRUTA SECA</a></li>
<li><a href="">ALIMENTOS ANIMALES</a></li>
<li><a href="">ALIMENTOS DIETÉTICOS</a></li>
<li><a href="">PRODUCTOS NAVIDEÑOS</a></li>
<li><a href="">GENÉRICO A. SECA</a></li>
</ul>
</li>
<li><a href="">Conservas</a></li>
<li><a href="">Leches y Batidos</a></li>
<li><a href="">Bebidas</a></li>
</ul>
</li>
<li><a href="">Productos frescos</a></li>
<li><a href="">Drogueria y Perfumeria</a></li>
<li><a href="">Sector bebé</a></li>
<li><a href="">Sector textil</a></li>
<li><a href="">Deporte</a></li>
<li><a href="">Calzado</a></li>
<li><a href="">Ferreteria y bricolage</a></li>
<li><a href="">Recargas</a></li>
<li><a href="">Bazar</a></li>
<li><a href="">Productos Especiales</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Sin clasificacion definida</a></li>
</ul>
</nav>
答案 0 :(得分：0)
由于您希望通过单击执行此操作，因此对子菜单类进行此修改有助于：
.submenu {
-webkit-transition: all 1s ease-out;
display: none;
}
同时阻止在点击链接时重新加载页面：
function myFunction(e) {
e.preventDefault();
document.getElementById("primero").classList.toggle("show");
}
当你打电话给它时，传递事件
<li><a href="#" onclick="myFunction(event)">Alimentacion y bebidas</a>
看看这个pen 修改了代码