Question

我正在尝试为网站创建一个过滤器，我使用复选框制作了一个手风琴，我想在其中放置复选框

<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;
}

DEMO：http://codepen.io/anon/pen/gPdzWK

Answer 1

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

如果您只想在input中显示form并隐藏您可以执行的其他操作：#accordion > div > input { display: none }选择input作为直接子项的div #accordion本身是{{1}}的直接孩子。

使用复选框手风琴中的复选框？

1 个答案: