在侧边栏中打开下拉菜单

Question

我正在做一个项目，并且创建了一个导航栏。 在此下拉菜单中也存在。 在此下拉菜单中，有悬停效果。

现在，我试图单击事件并打开和关闭下拉菜单的子菜单 。 但是没有用。 我只使用HTML和CSS 。

现在，悬停下拉菜单已打开。 但是我正在尝试做：

单击时 打开和关闭 下拉菜单。

我的代码是：

 /* define a fixed width for the entire menu */ .navigation { width: 300px; } /* reset our lists to remove bullet points and padding */ .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } /* make ALL links (main and submenu) have padding and background color */ .mainmenu a { display: block; background-color: #CCC; text-decoration: none; padding: 10px; color: #000; } /* add hover behaviour */ .mainmenu a:hover { background-color: #C5C5C5; } /* 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: 200px; } /* 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: #ddd; } /* hover behaviour for links inside .submenu */ .submenu a:hover { background-color: #993; } /* 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 0.5s ease-out; } 

 <nav class="navigation"> <ul class="mainmenu"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Products</a> <ul class="submenu"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li><a href="">Contact us</a></li> </ul> </nav> 

Answer 1

您可以将复选框（ <input type="checkbox"> ）与相邻的同级组合器（+）结合使用来切换子菜单。 将链接（ a ）转换为标签。 将标签的for属性设置为输入的id ，然后使用display: none隐藏输入。

 /* define a fixed width for the entire menu */ .navigation { width: 300px; } /* reset our lists to remove bullet points and padding */ .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } /* make ALL links (main and submenu) have padding and background color */ .mainmenu a, .mainmenu label { display: block; background-color: #CCC; text-decoration: none; padding: 10px; color: #000; } .mainmenu input { display: none; } /* add hover behaviour */ .mainmenu a:hover { background-color: #C5C5C5; } /* when hovering over a .mainmenu item, display the submenu inside it. we're changing the submenu's max-height from 0 to 200px; */ .mainmenu :checked+.submenu { display: block; max-height: 200px; } /* 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: #ddd; } /* hover behaviour for links inside .submenu */ .submenu a:hover { background-color: #993; } /* 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 0.5s ease-out; } 

 <nav class="navigation"> <ul class="mainmenu"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><label for="products">Products</label><input type="checkbox" id="products"> <ul class="submenu"> <li><a href="">Tops</a></li> <li><a href="">Bottoms</a></li> <li><a href="">Footwear</a></li> </ul> </li> <li><a href="">Contact us</a></li> </ul> </nav> 

Answer 2

这是你的解决方案

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown 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'); } } } } 

 .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; } /**/ .dropbtn { background-color: #ccc; color: #000; border: none; cursor: pointer; padding: 10px; display: block; } .dropbtn:hover, .dropbtn:focus { background-color: #ccc; } .dropbtn:hover{ background-color: #C5C5C5; } .dropdown { position: relative; } .dropdown-content { display: none; position: absolute; background-color: #ddd; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; width: 300px; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #993;} .show {display: block;} 

 <nav class="navigation"> <ul class="mainmenu"> <li><a>Home</a></li> <li><a>About</a></li> <div class="dropdown"> <li onclick="myFunction()" class="dropbtn">Products</li> <div id="myDropdown" class="dropdown-content"> <a>Tops</a> <a>Bottoms</a> <a>Footwear</a> </div> </div> <li><a href="">Contact us</a></li> </ul> </nav> 

你可以用JavaScript实现，这是正确的解决方案