如何解决三个 html 复选框一次只能点击一个
我正在制作一个包含三个下拉选项“课程长度”、“定价”和“取消”的信息部分
出于某种原因,复选框只能连续点击(即我不能点击展开“取消”,除非我已经展开了“课程长度”和“定价”——按这个顺序)
我希望用户能够按他们喜欢的任何顺序点击这些按钮。我认为这是一个格式问题,因为当光标稍微悬停在箭头 img 的右侧时会发生变化
HTML 和 CSS:
.accordion {
width: 95%;
max-width: 400px;
margin: auto;
}
.accordion label {
display: block;
margin: auto;
text-align: center;
cursor: pointer;
}
.arrow img {
padding-left: 6px;
height: 15px;
}
.accordion p {
text-align: left;
visibility: none;
height: 0;
opacity: 0;
transition: .5s;
-webkit-transition: .5s;
}
#tm:checked ~ .hiddentext {
visibility: visible;
height: auto;
opacity: 1;
}
input#tm {
display: none;
position: relative;
}
#tn:checked ~ .hiddentext {
visibility: visible;
height: auto;
opacity: 1;
}
input#tn {
display: none;
position: relative;
}
#to:checked ~ .hiddentext {
visibility: visible;
height: auto;
opacity: 1;
}
input#to {
display: none;
position: relative;
}
<div class="accordion">
<label for="tm" class="accordionitem">
<h3 class="font">Course Length<span class="arrow"><img src="images/arrow.svg" /></span></h3>
</label>
<input type="checkBox" id="tm" />
<p class="hiddentext font">
Term - 16 Weeks
<br>Days - Monday to Tuesday 6-9pm
<br>Location - Levels Newton Academy
</p>
</div>
<div class="accordion">
<label for="tn" class="accordionitem">
<h3 class="font">Pricing
<span class="arrow">
<img src="images/arrow.svg" />
</span>
</h3>
</label>
<input type="checkBox" id="tn" />
<p class="hiddentext font">
Cost - £2,400
<br>Deposit required to secure place.
<br>Financial plans available. Please contact us for more information.
</p>
</div>
<div class="accordion">
<label for="to" class="accordionitem">
<h3 class="font">Cancellations<span class="arrow"><img src="images/arrow.svg" /></span></h3>
</label>
<input type="checkBox" id="to" />
<p class="hiddentext font">
We understand situations can arise and be out of your control,thats’s why you have until 21 days prior to your start date to receive a full refund if you need to cancel. There is a 20% cancellation charge on the amount already paid,then a full refund of what’s remaining. Any changes after 21 days and we can only offer a course date change,not a refund.
</p>
</div>
解决方法
问题是您的 p.hiddentext
位于下一个标签的顶部,这就是您的标签不可点击的原因。只需将您的标签放在 p
标签的顶部,它应该可以正常工作。尝试添加以下 CSS:
.accordion label {
position: relative;
z-index: 9;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。