带有嵌套手风琴的CSS手风琴不起作用

时间：2014-01-07 06:24:33

标签： html css accordion

我想要没有任何javascript的手风琴控制，

所以我得到了这样的手风琴：

http://jsfiddle.net/2QsHz/ 

<div class="accordion vertical">
    <ul>
        <li>
            <input type="radio" id="radio-1" name="radio-accordion" checked="checked" />
            <label for="radio-1">Title1</label>
            <div class="content">
                <lable>THis is Nested accordion control </lable>
                <div class="accordion vertical">
                    <ul>
                        <li>
                            <input type="radio" id="radio11" name="radio-accordion" checked="checked" />
                            <label for="radio11">Title1.1</label>
                            <div class="content">Title1.1 Content</div>
                        </li>
                        <li>
                            <input type="radio" id="radio12" name="radio-accordion" checked="checked" />
                            <label for="radio12">Title1.2</label>
                            <div class="content">Title1.2 Content</div>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <input type="radio" id="radio-2" name="radio-accordion" />
            <label for="radio-2">Title2</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
        <li>
            <input type="radio" id="radio-3" name="radio-accordion" />
            <label for="radio-3">Title3</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
    </ul>

</div>

但在1个手风琴小组中..我有嵌套手风琴，当我点击它时，整个手风琴关闭。

我想在那里看到嵌套的手风琴。

3 个答案:

答案 0 :(得分：3)

更改内部广播名称，例如name =“radio-accordion2”，然后添加另一个css：

.vertical .vertical [type=radio]:checked ~ label ~ .content,.vertical  .vertical [type=checkbox]:checked ~ label ~ .content {
    height:200px;
}

答案 1 :(得分：2)

为嵌套的折叠按钮使用不同的名称..并删除选中的选项..并更改内部手风琴的高度

现在您的代码如下所示：

CSS :(仅为内部手风琴添加了最后一节高度200）

/* Shared for all accordion types */
.accordion {
    font-family:Arial, Helvetica, sans-serif; 
    margin:0 auto;
    font-size:14px;
    border:1px solid #542437;
    border-radius:10px;
    width:600px;
    padding:10px;
    background:#fff;
}
.accordion ul {
    list-style:none;
    margin:0;
    padding:0;    
}
.accordion li {
    margin:0;
    padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
    display:none;
}
.accordion label {
    display:block; 
    font-size:16px;
    line-height:16px;
    background:#D95B43;
    border:1px solid #542437;
    color:#542437;
    text-shadow:1px 1px 1px rgba(255,255,255,0.3);
    font-weight:700;
    cursor:pointer;
    text-transform:uppercase;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;  
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
    background:#C02942;
    color:#FFF;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.accordion .content {
    padding:0 10px;
    overflow:hidden; 
    border:1px solid #fff; /* Make the border match the background so it fades in nicely */
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out; 
}
.accordion p {
    color:#333;
    margin:0 0 10px;
}
.accordion h3 {
    color:#542437;
    padding:0;
    margin:10px 0;
}


/* Vertical */
.vertical ul li {
    overflow:hidden; 
    margin:0 0 1px;
}
.vertical ul li label {
    padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
    border-bottom:0;
}
.vertical ul li label:hover {
    border:1px solid #542437; /* We don't want the border to disappear on hover */
}
.vertical ul li .content {
    height:0px;
    border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
    height:300px;
    border:1px solid #542437;
}

.vertical .vertical [type=radio]:checked ~ label ~ .content, .vertical .vertical [type=checkbox]:checked ~ label ~ .content {
    height:150px;
    border:1px solid #542437;
}

HTML :(将名称更改为radio-accordion1）

   <div class="accordion vertical">
    <ul>
        <li>
            <input type="radio" id="radio-1" name="radio-accordion" checked="checked" />
            <label for="radio-1">Title1</label>
            <div class="content">
                <div class="accordion vertical">
                    <ul>
                        <li>
                            <input type="radio" id="radio11" name="radio-accordion1" />
                            <label for="radio11">Title1.1</label>
                            <div class="content">Title1.1 Content</div>
                        </li>
                        <li>
                            <input type="radio" id="radio12" name="radio-accordion1" />
                            <label for="radio12">Title1.2</label>
                            <div class="content">Title1.2 Content</div>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <input type="radio" id="radio-2" name="radio-accordion" />
            <label for="radio-2">Title2</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
        <li>
            <input type="radio" id="radio-3" name="radio-accordion" />
            <label for="radio-3">Title3</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
    </ul>

</div>

答案 2 :(得分：0)

另一种解决方案

这里是css 

.accordion {
font-family:Arial, Helvetica, sans-serif; 
margin:0 auto;
font-size:14px;
border:1px solid #542437;
border-radius:10px;
width:600px;
padding:10px;
background:#fff;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;    
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:16px;
line-height:16px;
background:#D95B43;
border:1px solid #542437;
color:#542437;
text-shadow:1px 1px 1px rgba(255,255,255,0.3);
font-weight:700;
cursor:pointer;
text-transform:uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion             [type=checkbox]:checked ~ label {
background:#C02942;
color:#FFF;
text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h3 {
color:#542437;
padding:0;
margin:10px 0;
}

.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}

.content,.inner-content{
display:none;
}


.accordion [type=radio]:checked ~ .content{
display:block;
}


.inner [type=radio]:checked ~ .inner-content{
display:block;
}

html标记如下

<div class="accordion vertical">
<ul>
    <li>
        <input type="radio" id="radio-1" name="radio-accordion" checked="checked" />
        <label for="radio-1">Title1</label>
            <div class="inner content">
                <ul>
                    <li>
                        <input type="radio" id="radio11" name="radio-accordion1" />
                        <label for="radio11">Title1.1</label>
                        <div class="inner-content">Title1.1 Content</div>
                    </li>
                    <li>
                        <input type="radio" id="radio12" name="radio-accordion1" />
                        <label for="radio12">Title1.2</label>
                        <div class="inner-content">Title1.2 Content</div>
                    </li>
                </ul>
            </div>
    </li>
    <li>
        <input type="radio" id="radio-2" name="radio-accordion" />
        <label for="radio-2">Title2</label>
        <div class="content">
            <h3>Totally another one right here</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
            <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
        </div>
    </li>
    <li>
        <input type="radio" id="radio-3" name="radio-accordion" />
        <label for="radio-3">Title3</label>
        <div class="content">
            <h3>Totally another one right here</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
            <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
        </div>
    </li>
</ul>

</div>
相关问题
最新问题