Question

我用复选框仅用CSS和HTML编写了此手风琴，但是每个手风琴中的可单击内容都不再可单击，因为现在当我单击它时，手风琴才关闭，

我如何才能再次单击其中的链接/视频？预先非常感谢

ul li i:before {
    -webkit-transform: translate(-2px, 0) rotate(45deg);
    transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
    -webkit-transform: translate(2px, 0) rotate(-45deg);
    transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
}

<body>
  <ul>
      <li>
      <input type="checkbox" checked>
          <h2>Title</h2>
          <p>click <a href="https://www.google.nl/ "> here</a></p>
      </li>
  </ul>
</body>

Answer 1

您的问题是该复选框的位置绝对正确，因此当您单击链接时，您实际上仍在单击该复选框。

要解决此问题，请添加

ul li {
  position: relative;
}

然后

ul li input ~ p {
  position: relative;
  z-index: 2;
}

因此您的内容显示在复选框上方。

演示：https://jsfiddle.net/becLu1v0/

Answer 2

您可以使用z-index并为链接指定一个类名。

ul li i:before {
    -webkit-transform: translate(-2px, 0) rotate(45deg);
    transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
    -webkit-transform: translate(2px, 0) rotate(-45deg);
    transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
}

.clickable{
    z-index:100;
    position:relative;
}

<body>
  <ul>
      <li>
      <input type="checkbox" checked>
          <h2>Title</h2>
          <p class="clickable">click <a href="https://www.google.nl/ "> here</a></p>
      </li>
  </ul>
</body>

手风琴内的可单击链接（仅HTML CSS）

2 个答案: