Question

This tutorial解释了如何使用:hover伪类来设置悬停时HTML元素的样式，以及如何将鼠标悬停在纯CSS中的特定元素上时创建下拉列表（不使用任何JavaScript）。

是否可以在纯CSS中创建与下面示例中相同的下拉列表，但是在单击元素而不是将鼠标悬停在元素上时？

我宁愿不使用任何JavaScript，或者 - 如果没有JavaScript则不可能 - 尽可能少使用JavaScript。投石器的物品应该可以自己点击。

实施例

＆＃13;

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    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: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

＆＃13;

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

＆＃13;

Answer 1

在这里，您使用隐藏的复选框，并在选中＆＃34;＆＃34;＆＃34;时显示菜单。

＆＃13;

/*hide the inputs/checkmarks*/
input {
  display: none;
}

/*hide the submenu*/
ul.submenu {
  max-height: 0;
  overflow: hidden;
}

/*position the label*/
label {
  position: relative;
  display: block;
  cursor: pointer;
}

/*show the submenu when checked*/
input:checked~ul.submenu {
  max-height: 300px;
}

＆＃13;

<input id="check01" type="checkbox" name="menu" />
<label for="check01">Menu</label>
<ul class="submenu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

＆＃13;

取自this Codepen并简化。

Answer 2

使用单选按钮和同级选择器（fiddle here）

这与复选框的不同之处在于，当单击其他菜单项时，它将自动关闭打开的菜单项。

   <ul class="menu">
    <li>
        <input type="radio" name="menuopt" id="drop1" />
        <label class="opener" for="drop1">Parent item 1</label>
        <label class="closer" for="dropclose">Parent item 1</label>
        <ul>
            <li><a href="">Menu item 1</a></li>
            <li><a href="">Menu item 2</a></li>
            <li><a href="">Menu item 3</a></li>
        </ul>
    </li>
    <li>
        <input type="radio" name="menuopt" id="drop2" />
        <label class="opener" for="drop2">Parent item 2</label>
        <label class="closer" for="dropclose">Parent item 2</label>
        <ul>
            <li><a href="">Menu item 1</a></li>
            <li><a href="">Menu item 2</a></li>
            <li><a href="">Menu item 3</a></li>
            <li><a href="">Menu item 4</a></li>
            <li><a href="">Menu item 5</a></li>
        </ul>
        <input type="radio" name="menuopt" id="dropclose" />
    </li>
</ul>

CSS：

.menu ul, 
.menu input, 
.menu .closer, 
.menu input:checked ~ .opener{
    display:none;
}
.menu input:checked ~ ul,
.menu input:checked ~ .closer{
    display:block;
}

Answer 3

我的朋友，我遇到了一个与您相似的问题，但是我可以使用javascript解决此问题。 https://www.youtube.com/watch?v=w88U9JA70wQ 对我有帮助的教程 Mas vou ajudar：

<html>
<head>
<style>
function show_hide () {
  var click = document.getElementById ("myDropdwon");
  if (click.style.display ==="none") {
      click.style.display = "block" ;
  } else {
    click.style.display = "none" ;
  }

}
</style>
</head>
<body>
    <div class="dropdown" style="float:left;">
      <button onclick="show_hide()" 
 class="dropbtn">Left</button>
      <div style="display:none"; class="dropdown-content" style="left:0;" id="myDropdwon">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
</body>
</html>

纯CSS可点击下拉列表？

实施例

3 个答案: