三个 html 复选框一次只能点击一个

Question

我正在制作一个包含三个下拉选项的信息部分 'Course Length' 'Pricing' 和 'Cancellations'

出于某种原因，复选框只能按顺序单击（即我无法单击以展开 'Cancellations'，除非我已按顺序展开 'Course Length' 和 'Pricing'）

我希望用户能够以他们喜欢的任何顺序点击这些。我认为这是一个格式问题，因为当光标稍微悬停在箭头 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>

Answer 1

问题是您的 p.hiddentext 位于下一个标签的顶部，这就是您的标签不可点击的原因。只需将您的标签放在 p 标签的顶部，它应该可以正常工作。尝试添加以下 CSS:

.accordion label {
    position: relative;
    z-index: 9;
}

三个 html 复选框一次只能点击一个

Three html checkboxes only clickable one at a time

html

css

accordion