你怎麼可以讓你點擊一個選項後，下拉菜單中消失了？

Question

我只是一個小的下拉菜單，我希望能夠使它所以當我點擊的選項（而不是按鈕一個下拉菜單消失，但是當你將鼠標懸停在按鈕，你得到的只是菜單）。我一直在尋找解決方案，但我似乎無法找到任何答案。

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

可以通過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>