手風琴內的可點擊鏈接（僅限 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