显示带有选中复选框的选项无法统一工作

Question

我是一个初学者，我正在构建一个简单的计算器，其中有几个选项可以包含在总结果中。选中“前保险杠”复选框后，它将显示该前保险杠的三个不同选项。这不适用于所有选项。

CSS 用于前保险杠复选框后，我复制并粘贴了后保险杠和门把手……但实际上只有前保险杠和门把手有效，而后保险杠没有显示任何内容选中时的附加选项。所有三个的代码都是相同的（保存类名）所以我不确定为什么它们的工作方式不同。

就像我说的，我是一个初学者，所以请原谅我凌乱的代码。

仅就上下文而言，该应用程序用于根据选项计算车辆包裹价格，这是我的日常工作，因此为我已经了解很多的东西构建应用程序变得更加容易。

            <div class="options">
                <p>Options</p>
                    <div class="flexbox-one-a">
                        <div class="bumpers">
                            <div class="front-bumper">
                                <input type="checkbox"id="front-bumper"> <label for="front-bumper">Front Bumper</label>
                                <div class="reveal-if-active-front">
                                    <input type="radio" name="front-bumper" class="front-standard"><label for="front-standard">Standard</label><br>
                                    <input type="radio" name="front-bumper" class="front-complex"><label for="front-complex">Complex</label><br>
                                    <input type="radio" name="front-bumper" class="front-highlycomplex"><label for="front-highlycomplex">Highly Complex</label>
                                </div>
                            </div>      
                            <div class="back-bumper">       
                                <input type="checkbox"id="back-bumper">    <label for="back-bumper">Back Bumper<label>
                                <div class="reveal-if-active-back">
                                    <input type="radio" name="back-bumper" class="back-standard"><label for="back-standard">Standard</label><br>
                                    <input type="radio" name="back-bumper" class="back-complex"><label for="back-complex">Complex</label><br>
                                    <input type="radio" name="back-bumper" class="back-highlycomplex"><label for="back-highlycomplex">Highly Complex</label>
                                </div>
                            </div>
                        </div>
                        <div class="mirrors-and-handles">      
                            <div class="mirrors">       
                                <input type="checkbox" id="mirrors"><label for="mirrors">Mirrors</label>
                            </div>      
                            <div class="door-handles">      
                                <input type="checkbox"id="door-handles"> <label for="door-handles">Door Handles</label>
                                <div class="reveal-if-active-handles">
                                    <input type="radio" name="door-handles" class="two-handles"><label for="two-handles">2 Handles</label><br>
                                    <input type="radio" name="door-handles" class="four-handles"><label for="four-handles">4 Handles</label><br>
                                </div>
                            </div>  
                        </div>
                    </div>
                </div>

.reveal-if-active-front, .reveal-if-active-back, .reveal-if-active-handles {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.options input[type="checkbox"]:checked ~ .reveal-if-active-front {
    opacity: 1;
    max-height: 100px; 
    overflow: visible;
}

.options input[type="checkbox"]:checked ~ .reveal-if-active-back {
    opacity: 1;
    max-height: 100px; 
    overflow: visible;
}

.options input[type="checkbox"]:checked ~ .reveal-if-active-handles {
    opacity: 1;
    max-height: 100px; 
    overflow: visible;
}

Answer 1

您忘记关闭后保险杠<label> 标记。

<label for="back-bumper">Back Bumper</label>

这是初学者的常见问题。
您可以使用这些在线工具来检查您的 HTML 代码并找出相关问题：

HTML Validator / Linter
Closing Tag Checker for HTML5 by Alicia Ramirez