在點擊時顯示下拉菜單，而不是懸停

Question

將鼠標懸停在下拉菜單上，而不是顯示內容，而是單擊它以顯示下拉菜單。 如果沒有JQuery或插件，是否可以這樣做？ 我已經看到了一些示例，但是由於樣式很多，因此有點復雜。

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } 

 <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> 

簡單的解釋將不勝感激，謝謝！

Answer 1

最好的非JavaScript答案，也許是最好的解決方案，是使用input[type='checkbox']:checked + label組合。

這樣，菜單將僅在用戶單擊時切換打開或關閉。

請注意，我已將您的button放入標簽。 for屬性必須設置為復選框的id 。 另外，在屏幕外彈出復選框，以便僅顯示標簽。 通過使其成為標簽，設置display: block和cursor:pointer以模仿按鈕設計。

如果使用常規同級~和相鄰的同級+選擇器，則選中此復選框時可以顯示菜單。 見下文。

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; position: relative; display:block; cursor:pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropcheck { position: absolute; left: -9999px; } .dropcheck:checked ~ .dropdown-content { display: block; } .dropcheck:checked + .dropbtn { background-color: #3e8e41; } 

 <div class="dropdown"> <input id="dropcheck" class="dropcheck" type="checkbox"> <label for="dropcheck" class="dropbtn">Dropdown</label> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> 

Answer 2

我建議您使用Javascript路線。

當click事件發生時，將一個類添加到DOM並相應地設置下拉菜單的樣式。 在此示例中，每當單擊按鈕時，我都會切換類名show-menu 。

 var dropDown = document.querySelector(".dropbtn"); var dropDownDiv = document.querySelector(".dropdown"); dropDown.addEventListener("click", function(){ dropDownDiv.classList.toggle('show-menu'); }); 

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .show-menu .dropdown-content { display: block; } .show-menu .dropbtn { background-color: #3e8e41; } 

 <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> 

Answer 3

在CSS中使用.div：active將是您的解決方案。