繁体   English   中英

单击某个选项后,如何使下拉菜单消失?

[英]How can you make a drop down menu disappear after you click on an option?

我只有一个小的下拉菜单,我希望能够做到这一点,当我点击其中一个选项(不是按钮,而只是你将鼠标悬停在按钮上时获得的菜单)时,下拉菜单消失了。 我一直在寻找解决方案,但我似乎无法找到任何答案。

 function changeType(str) { document.getElementById("selectType").innerHTML = str; document.getElementById("selectType").value = str; } 
 .dropbtn { background-color: #360363; margin-bottom: 0px; min-width: 120px; color: white; padding: 0px; font-size: 0.7em; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; margin-top: 0px; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; margin-top: 0px; min-width: 120px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 6px 16px; text-decoration: none; display: block; margin-top: 0px; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #4B0082; transition: 0.5s; } 
 <div class="dropdown"> <button id="selectType" class="dropbtn" value="Choose Color">Choose Color</button> <div class="dropdown-content"> <a onclick="changeType('Red')" href="#">Red</a> <a onclick="changeType('Green')" href="#">Green</a> </div> </div> 

你可以通过CSS实现这个目标:

.dropdown:active .dropdown-content,
.dropdown:focus .dropdown-content {
    display: none;
}

片段:

 function changeType(str) { document.getElementById("selectType").innerHTML = str; document.getElementById("selectType").value = str; } 
 .dropbtn { background-color: #360363; margin-bottom: 0px; min-width: 120px; color: white; padding: 0px; font-size: 0.7em; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; margin-top: 0px; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; margin-top: 0px; min-width: 120px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 6px 16px; text-decoration: none; display: block; margin-top: 0px; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #4B0082; transition: 0.5s; } .dropdown:active .dropdown-content, .dropdown:focus .dropdown-content { display: none; } 
 <div class="dropdown"> <button id="selectType" class="dropbtn" value="Choose Color">Choose Color</button> <div class="dropdown-content"> <a onclick="changeType('Red')" href="#">Red</a> <a onclick="changeType('Green')" href="#">Green</a> </div> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM