我已经构建了一个仅CSS的手风琴...（并且特别要求我在不使用JavaScript的情况下构建它）。
到目前为止，我的代码运行正常。我正在使用<input type="checkbox" checked="checked" />实现这一目标。
我遇到的问题是，我隐藏/切换的内容包括超链接。而且当我的风琴关闭时，即使关闭了风琴，超链接仍然可以单击。
IE-如果您将鼠标悬停在“选择另一个很酷的目的地”副本下40px-50px，则看不到内容。但是您仍然可以将鼠标悬停在（不可见的）超链接上。甚至单击它们。
如何阻止这种情况发生？
我不希望我的超链接是可点击的。仅当手风琴打开时！
这里是一个Codepen，您可以在其中看到以下内容：https://codepen.io/ReenaVerma1981/pen/qBdbbWJ
ul {
list-style: none;
padding: 0px;
}
.readme {
background-color: transparent;
color: #ff6600;
font-family: "easyjet_rounded_demi",Arial,Helvetica,sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 22px;
padding: 0;
border: 0;
}
.accordion {
margin: 0 auto;
width: 100%;
}
.accordion__item {
float: left;
position: relative;
width: 100%;
background-color: transparent;
border-radius: 4px;
margin-bottom: 40px;
}
.accordion__item span {
color: #ff6600;
margin-top: 1rem;
position: absolute;
left: 280px;
top: 0;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.accordion__item input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 50px;
z-index: 1;
opacity: 0;
}
.accordion__item input[type=checkbox]:checked ~ div.panel {
float: left;
margin: 5px 0;
max-height: 0;
opacity: 0;
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.accordion__item input[type=checkbox]:not(:checked) ~ span {
padding-top: 5px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion__item input[type=checkbox]:checked ~ span {
padding-top: 5px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.panel {
background-color: transparent;
border: 1px solid grey;
}<body>
<div class="accordion">
<ul class="">
<li class="accordion__item">
<input type="checkbox" checked="checked" />
<p class="readme">Choose another cool destination</p>
<span class="">
<svg viewBox="1 1 22 22" width="1em" height="1em" aria-hidden="true" focusable="false" class="icon-svg"><path d="M21.7 6.79a1 1 0 00-1.41 0L12 15.08 3.71 6.79a1 1 0 00-1.41 0 1 1 0 000 1.42l9 9a1 1 0 001.42 0l9-9a1 1 0 00-.02-1.42z"></path></svg>
</span>
<div class="panel">
<strong>
<a href="www.google.com">London</a>,
<a href="www.google.com">NYC</a>,
<a href="www.google.com">LA</a>,
<a href="www.google.com">LAX</a>,
<a href="www.google.com">Dublin</a>,
<a href="www.google.com">Liverpool</a>,
<a href="www.google.com">Manchester</a>,
<a href="www.google.com">Dubai</a>,
<a href="www.google.com">Hong Kong</a>,
<a href="www.google.com">Singapre</a>.
</strong>
</div>
</li>
</ul>
</div>
</body>
</html>.accordion__item input[type=checkbox]:checked ~ div.panel {
float: left;
margin: 5px 0;
max-height: 0;
//opacity: 0; instead use display: none
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
标记接受的答案，如果您认为答案是共通的