javascript - Show dropdown on click instead of hover - Stack Overflow

admin管理员组

文章数量:1351978

Instead of showing content when hover on the dropdown, click it to show the drop down. Is this possible to do without JQuery or plugins? I have seen some example but it is a bit plicated as there is a lot of styling.

.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>

Instead of showing content when hover on the dropdown, click it to show the drop down. Is this possible to do without JQuery or plugins? I have seen some example but it is a bit plicated as there is a lot of styling.

.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>

Simple explanation would be highly appreciated, Thanks!

• javascript
• html
• css

Share Improve this question Follow edited Aug 29, 2019 at 3:10 Yong 4277 bronze badges asked Jul 11, 2018 at 2:46 Anonymous Y - 杨z强Anonymous Y - 杨z强 21711 gold badge44 silver badges2222 bronze badges 1

• It's a little bit more JavaScript code. Do you want to do this with JavaScript? – Saral Commented Jul 11, 2018 at 2:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The best non-JavaScript answer, and perhaps best solution, is to use a input[type='checkbox']:checked + label bination.

This way, the menu will toggle open or close only on user clicks.

Note that I made your button into the label. The for attribute must be set to the id of the checkbox. Also, shoot the checkbox off screen so that only the label is visible. By making it a label, set display: block and cursor:pointer to mimic the button design.

If you use the general sibling ~ and the adjacent sibling + selectors, you can show your menu when the checkbox is checked. See below.

.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>

I will suggest you go with a Javascript route.

When the click event happens, add a class to the DOM and style the drop down accordingly. In this example, I'm toggling the class-name show-menu whenever the button is clicked.

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>

Using the .div:active in css would be your solution.

本文标签： javascriptShow dropdown on click instead of hoverStack Overflow