html - 在复选框 Accordion 中使用复选框？

Question

我正在尝试为网站创建一个过滤器，我使用复选框制作了一个 Accordion ，我想使用

<input name="name" value="value" type="checkbox"/>

但是复选框本身不会显示。

代码如下:

<div id="container">
    <section id="accordion">
        <div>
            <input type="checkbox" id="check-1" />
            <label for="check-1">Continent</label>                  
                <form action="">
                    Europe<input name="animal" value="Cat" type="checkbox"/> 
                </form>                 
        </div>
        <div>
            <input type="checkbox" id="check-2" />
            <label for="check-2">Country</label>
                <form action="">
                    UK<input name="animal" value="Cat" type="checkbox"/> 
                </form>
        </div>
        <div>
            <input type="checkbox" id="check-3" />
            <label for="check-3">League / Competition</label>
            <form action="">
                        Premier League<input name="animal" value="Cat" type="checkbox"/> 
                </form>
        </div>
        <div>
            <input type="checkbox" id="check-4" />
            <label for="check-4">Date</label>
            <form action="">
                        march 13th<input name="animal" value="Cat" type="checkbox"/> 
                </form>
        </div>


    </section>

和CSS:

* {
    font-family: Arial, sans;
    margin: 0;
    padding: 0;
}

h1, h2 {
    margin: 1em 0 0 0;
    text-align:left;
}

h2 {
    margin: 0 0 1em 0;
}

#container {
    margin: 10px;
    width: 20%;
}
#accordion input {
    display: none;
}

#accordion label {
    background: #eee;
    border-radius: .25em;
    cursor: pointer;
    display: block;
    margin-bottom: .125em;
    padding: .25em 1em;
    z-index: 20;
}

#accordion label:hover {
    background: #ccc;
}

#accordion input:checked + label {
    background: #ccc;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: white;
    margin-: 0;
}

#accordion form{
    background: #f7f7f7;
    height:0px;
    overflow:hidden;
    z-index:10;
}

#accordion from input{
    padding: 1em;
}

#accordion input:form {
}

#accordion input:checked ~ form {
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
    height: auto;
    margin-bottom: .125em;
}    

此处演示:http://codepen.io/anon/pen/gPdzWK

Answer 1

所以你有一行 #accordion input { display: none }，这将隐藏你所有的 input。

如果您只想在 form 中显示 input 并隐藏其他的，您可以这样做:#accordion > div > input { display: none } 选择 input 是 div 的直接子级，而 div 本身是 #accordion 的直接子级。