html - 如何将悬停下拉菜单转换为可点击的下拉菜单？

Question

对不起，我是新手问题，但我是网络开发的新手。

我有一个代码可以让我在我的网站上放置一个 hooverable 元素。问题是我现在想将它转移到可点击元素 - 最好是右键单击。

我尝试在 css 中使用 :active 选项来实现，但没有成功。

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
}

.dropdown:hover .dropdown-content {
   display: block;
}

有没有一种简单的方法可以在纯 css 中实现它？

Answer 1

在纯 CSS 中，您可能必须使用所谓的 the checkbox hack。 .基本上，您使用一个复选框来记录下拉列表是否打开，并使用 :checked 伪类来决定是否显示 dropdown-content。

#dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

#dropdown:checked ~ .dropdown-content {
  display: block;
}

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

<label for="dropdown">Dropdown</label>
<input type="checkbox" id="dropdown">
<div class="dropdown-content">
  And this is the content.
</div>

我建议改用 Javascript。

通常，在 JS 中，这是通过向下拉组件本身添加一个类(例如“active”或“open”)来完成的。然后，您可以修改 CSS 选择器以显示从 .dropdown:hover .dropdown-content 到 .dropdown.open .dropdown-content 的下拉内容。

为此，您需要有一个事件监听器用于单击(甚至可能有一些键盘事件，例如 Enter 按键)，然后将“打开”或“事件”类添加到下拉列表中。这是一个片段，展示了如何做到这一点:

var dropdown = document.querySelector(".dropdown");
dropdown.addEventListener("click", function(e) {
  var dropdown = e.target;

  // If it has "open" class, remove it. Else add it.
  if (dropdown.classList.contains("open")) {
    dropdown.classList.remove("open");
  } else {
    dropdown.classList.add("open");
  }
});

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown.open .dropdown-content {
  display: block;
}

<div class="dropdown">
  Let's say this is dropdown.
  <div class="dropdown-content">
    And this is the content.
  </div>
</div>