css - 纯 CSS 折叠/展开 div

Question

我有一个纯 CSS 可折叠 div，它基于使用:targetpsuedoclass 的其他人的代码。我要设置的是一个包含 12 个以上问题的页面，当您单击 + 按钮时，答案 div 会在下方展开。如果不编写大量额外的 CSS，我无法弄清楚如何在此页面上制作多个折叠 div 元素。任何人都对如何编写此代码有建议，以便最小化我的 CSS 代码？（即，所以我不必为 12+ 个问题中的每一个都输入一堆独特的选择器）。

我不能使用 Javascript，因为这是在不允许 JS 的 wordpress.com 网站上进行的。

这是我的 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;
}

score 131 · Accepted Answer

根据您希望支持的浏览器/设备，或者您准备为不兼容的浏览器提供的内容，您可能需要查看<summary>和<detail>标签。他们正是为了这个目的。完全不需要 css，因为折叠和显示是标签定义/格式的一部分。

我在这里做了一个例子：

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

浏览器支持各不相同。在 webkit 中尝试以获得最佳效果。其他浏览器可能默认显示所有解决方案。您也许可以回退到上述隐藏/显示方法。

score 52 · Accepted Answer

使用`<summary>`和`<details>`

使用<summary>和<details>元素是最简单的，但请查看浏览器支持，因为当前的 IE 不支持它。您可以使用polyfill（大多数是基于 jQuery 的）。请注意，不受支持的浏览器当然只会显示扩展版本，因此在某些情况下可能是可以接受的。

/* Optional styling */
summary::-webkit-details-marker {
  color: blue;
}
summary:focus {
  outline-style: none;
}

<details>
  <summary>Summary, caption, or legend for the content</summary>
  Content goes here.
</details>

另请参阅如何设置<details>元素样式（HTML5 Doctor）（有点棘手）。

纯 CSS3

选择:target器有很好的浏览器支持，它可以用来在框架内制作单个可折叠元素。

.details,
.show,
.hide:target {
  display: none;
}
.hide:target + .show,
.hide:target ~ .details {
  display: block;
}

<div>
  <a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
  <a id="show1" href="#show1" class="show">- Summary goes here</a>
  <div class="details">
    Content goes here.
  </div>
</div>
<div>
  <a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
  <a id="show2" href="#show2" class="show">- Summary goes here</a>
  <div class="details">
    Content goes here.
  </div>
</div>

score 32 · Accepted Answer

@gbtimmon 的答案很棒，但是太复杂了。我已经尽可能地简化了他的代码。

#answer,
#show,
#hide:target {
    display: none; 
}

#hide:target + #show,
#hide:target ~ #answer {
    display: inherit; 
}

<a href="#hide" id="hide">Show</a>
<a href="#/" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>

score 23 · Accepted Answer

您只需要迭代两个链接中的锚点。

<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>

看到这个 jsfiddle http://jsfiddle.net/eJX8z/

我还在常见问题解答电话中添加了一些空白以改进格式。

score 19 · Accepted Answer

或者一个几乎没有任何 CSS 的超级简单版本 :)

<style>   
.faq ul li {
    display:block;
    float:left;
    padding:5px;
}

.faq ul li div {
    display:none;
}

.faq ul li div:target {
    display:block;
}


</style>


<div class="faq">
   <ul>
   <li><a href="#question1">Question 1</a>   
   <div id="question1">Answer 1 </div>
   </li>


   <li><a href="#question2">Question 2</a>
   <div id="question2">Answer 2 </div>
   </li>
   <li><a href="#question3">Question 3</a>
   <div id="question3">Answer 3 </div>
   </li>
   <li><a href="#question4">Question 4</a>
   <div id="question4">Answer 4 </div>
   </li>
   <li><a href="#question5">Question 5</a>
   <div id="question5">Answer 5 </div>
   </li>
   <li><a href="#question6">Question 6</a>
   <div id="question6">Answer 6 </div>
   </li>
   </ul>  
</div>

http://jsfiddle.net/ionko22/4sKD3/

css - 纯 CSS 折叠/展开 div

5 回答 5

使用<summary>和<details>

纯 CSS3

Related

Reference

使用`<summary>`和`<details>`