Question

我在css手风琴里面有一个单选按钮，由于某种原因它不起作用。也许我用于手风琴的css覆盖了单选按钮？也许是因为手风琴是由一个导致问题的复选框制成的？我也把dojo控件放在手风琴里面并且有些工作，有些人不在下面是代码：手风琴外面的第一个单选按钮工作正常

HTML：

<input type="radio" name="colors" value="green" />Green <!--this works fine-->
<input type="radio" name="colors" value="red" />Red
<section id="accordionMTF">
    <div>
        <div style="width: 450px;
                              height: 80px"></div>
        <input type="checkbox" id="checkMTF-1" checked="checked" />
        <label for="checkMTF-1">Input System Info</label>
        <article>
            <input type="radio" name="colors" value="green" />Green  <!--this doesnt work-->
            <input type="radio" name="colors" value="red" />Red</article>
    </div>
    <div>
        <input type="checkbox" id="checkMTF-2" />
        <label for="checkMTF-3">Input Marking Information</label>
        <article>
            <p style="width: 450px;
                              height: 400px">Fill out form</p>
        </article>
    </div>
    <div>
        <input type="checkbox" id="checkMTF-3" />
        <label for="checkMTF-4">Complete and Submit</label>
        <article>
            <p style="width: 450px;
                              height: 400px">Fill out form</p>
        </article>
    </div>
</section>

的CSS： / Mark Ticket Form Accordion /

#accordionMTF input {
        display: none;
    }
    #accordionMTF label {
        background: #eee;
        border-radius: .25em;
        cursor: pointer;
        display: block;
        margin-bottom: .125em;
        padding: .25em 1em;
        z-index: 20;
    }
    #accordionMTF label:hover {
        background: #ccc;
    }
    #accordionMTF input:checked + label {
        background: #ccc;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        color: white;
        margin-bottom: 0;
    }
    #accordionMTF article {
        background: #f7f7f7;
        height:0px;
        overflow:hidden;
        z-index:10;
    }
    #accordionMTF article p {
        padding: 1em;
    }
    #accordionMTF input:checked article {
    }
    #accordionMTF input:checked ~ article {
        border-bottom-left-radius: .25em;
        border-bottom-right-radius: .25em;
        height: auto;
        margin-bottom: .125em;
    }

我有一个小提琴： here

由于

Answer 1

只要你继续使用相同的HTML结构，你需要做的就是重新修改你的CSS。跟随css

#accordionMTF input {
    display: none;
}

需要看起来像这样

#accordionMTF > div > input[type='checkbox'] {
    display : none;
}

这是在没有javascript的情况下创建手风琴的绝佳尝试。您也可以考虑合并CSS3动画。

还有一个错误，您的标签有for属性值错误。

这是一个工作小提琴http://jsfiddle.net/czo2m22s/21/

Answer 2

原因如下：

accordionMTF input {
        display: none;
    }

Answer 3

你手风琴的开发者决定隐藏所有输入（！？）

#accordionMTF input {
    display: none;
}

更合理的方法是将手风琴功能所需的输入提供给一个类（.hidden）并将其用作选择器而不是全部隐藏所有输入：

<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" />

.hidden {
    display: none;
}

WORKING EXAMPLE

单选按钮在css手风琴中不起作用

3 个答案: