纯CSS折叠/展开div

前端之家收集整理的这篇文章主要介绍了纯CSS折叠/展开div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个纯CSS可折叠div,它是基于别人的代码,使用:target伪造类。我想设置的是一个有12个问题的页面,当你点击按钮,答案div扩展下面。我不知道如何使多个折叠div元素在这个页面上,没有编写一个额外的CSS。任何人都有建议,如何写这个我的CSS代码最小化? (即,因此我不必为12个问题中的每一个输入一束唯一选择器)。

我不能使用Javascript,因为这是一个wordpress.com网站不允许JS。

这是我的jfiddle:http://jsfiddle.net/dmarvs/94ukA/4/

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
    vertical-align: top; 
    height:auto !important; 
}
.list {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}

/*style the (+) and (-) */
.hide,.show {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 1px 0 #666;
    text-align: center;
    text-decoration: none;
    Box-shadow: 1px 1px 2px #000;
    background: #cccbbb;
    opacity: .95;
    margin-right: 0;
    float: left;
    margin-bottom: 25px;
}

.hide:hover,.show:hover {
    color: #eee;
    text-shadow: 0 0 1px #666;
    text-decoration: none;
    Box-shadow: 0 0 4px #222 inset;
    opacity: 1;
    margin-bottom: 25px;
}

.list p{
    height:auto;
    margin:0;
}
.question {
    float: left;
    height: auto;
    width: 90%;
    line-height: 20px;
    padding-left: 20px;
    margin-bottom: 25px;
    font-style: italic;
}

解决方法

根据您希望支持的浏览器/设备,或者您准备好接受不符合SSL规定的浏览器的内容,您可以查看< summary>和< detail>标签。他们正是为了这个目的。不需要css,因为折叠和显示标签定义/格式的一部分。

我做了一个例子here

<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>

Browser support varies.尝试webkit以获得最佳效果。其他浏览器可能默认显示所有解决方案。你可以回退到上面描述的hide / show方法

原文链接:https://www.f2er.com/css/222830.html

猜你在找的CSS相关文章