HTML嵌套单选按钮

Question

我有4个单选按钮(A,B,C,D).当我点击单选按钮A时,会有另外两个选项 - A1和A2.其他人也会这样.如果我选择D2,则会出现另外2个单选按钮.

我怎么能用HTML做到这一点？

Answer 1

HTML和CSS3-only版本(小提琴):

组"D"的HTML(其他组类似)

<div>
    <input type="radio" name="level0" value="D" id="D"/>
    <label for="D">D</label>
    <div class="sub1">
        <div>
            <input type="radio" name="level1" value="D0" id="D0"/>
            <label for="D0">D0</label>
        </div>
        <div>
            <input type="radio" name="level1" value="D1" id="D1"/>
            <label for="D1">D1</label>
            <div class="sub2">
                <div>
                    <input type="radio" name="level2" value="D10" id="D10"/>
                    <label for="D10">D1-0</label>
                </div>
                <div>
                    <input type="radio" name="level2" value="D11" id="D11"/>
                    <label for="D11">D1-1</label>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.sub1, .sub2 { display: none; }

:checked ~ .sub1, :checked ~ .sub2 {
    display: block;
    margin-left: 40px;
}