手风琴内的可点击链接（仅限 HTML CSS）
[英]clickable links inside accordion (HTML CSS ONLY)
问题描述
i made this accordion with checkbox write in only CSS and HTML, however the clickable content inside each accordion is not clickable anymore, because now when i click on it, the accordion just closed,
我用复选框只用 CSS 和 HTML 编写了这个手风琴，但是每个手风琴内的可点击内容不再可点击，因为现在当我点击它时，手风琴刚刚关闭，
how can i make the links/videos inside clickable again?我怎样才能使里面的链接/视频再次可点击？ Thank you very much in advance,非常感谢您提前，
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>
2 个解决方案
解决方案1
0 已采纳 2019-03-19 09:50:04
Your problem is that the checkbox is positioned absolutely so when clicking on your link, you are actually still clicking on the checkbox.您的问题是复选框是绝对定位的，因此单击链接时，您实际上仍在单击复选框。
To fix this add要修复此添加
ul li {
position: relative;
}
and then进而
ul li input ~ p {
position: relative;
z-index: 2;
}
So your content appears above the checkbox.所以您的内容出现在复选框上方。
Demo: https://jsfiddle.net/becLu1v0/演示： https : //jsfiddle.net/becLu1v0/
解决方案2
0 2019-03-19 09:56:30
You could use z-index and give your link a class name.您可以使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.