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

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 个解决方案

解决方案1
0 已采纳 2019-03-19 09:50:04

解决方案2
0 2019-03-19 09:56:30

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-03-19 09:50:04

解决方案2 0 2019-03-19 09:56:30

解决方案1
0 已采纳 2019-03-19 09:50:04

解决方案2
0 2019-03-19 09:56:30