109

疑似クラスを使用する他の誰かのコードに基づいた、純粋な CSS 折りたたみ可能な div があります:target。私が設定しようとしているのは、12 個以上の質問があるページです。+ ボタンをクリックすると、答えの div が下に展開されます。大量の余分な CSS を書かないと、このページで複数の折りたたみ div 要素を作成する方法がわかりません。私のCSSコードが最小化されるように、これを書く方法について誰か提案がありますか? (つまり、12 以上の質問のそれぞれに一意のセレクターを多数入力する必要はありません)。

これは JS を許可しない wordpress.com サイトで行われているため、Javascript を使用できません。

これが私の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;
}
4

5 に答える 5

131

サポートしようとしているブラウザー/デバイス、または準拠していないブラウザーに対応する準備ができているものによっては、<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 で試してください。他のブラウザでは、デフォルトですべてのソリューションが表示される場合があります。おそらく、上記の非表示/表示方法にフォールバックできます。

于 2013-04-01T11:12:01.300 に答える
32

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

于 2016-08-11T20:39:27.883 に答える
23

2 つのリンクでアンカーを繰り返すだけです。

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

このjsfiddle http://jsfiddle.net/eJX8z/を参照してください

また、形式を改善するために、FAQ 呼び出しにマージンを追加しました。

于 2013-02-26T18:16:30.940 に答える
19

または、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/

于 2013-02-26T18:20:11.580 に答える