单击某个选项后，如何使下拉菜单消失？

Question

I have just a small dropdown menu and I would like to be able to make it so the drop down menu disappears when I click on one of the options (not the button, but just the menu you get when you hover over the button). I've been looking around for solutions to this, but I can't seem to find any answers.

 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> 

Answer 1

You can achieve this via CSS:

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

Snippet:

 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>