三个 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;
}

accordion html