1

ラジオ ボタンを使用して非表示/表示のアコーディオン メニューをトリガーします。jsfiddleで動作します...私が試した他のブラウザでは動作しません。私は、タイプミスしたか、行方不明になったか、完全に道に迷った小さな何かを想定しています。すべてのブラウザ/セットアップ/その他ですべてが正しく機能するわけではないことは承知していますが、この作業を読んだり理解したりしたことからですか?

編集: max-height は jsfiddle でも機能しません...したがって、これが問題になるはずです。基本的に、ulをliリストの長さに自動展開したい。したがって、固定高さを使用しても機能しません。高さ: 自動; max-height と同様に。どちらも動作しません..

ありとあらゆる助けをいただければ幸いです。

HTML

<section class="container">
<div>
    <input id="test1" name="acctest" type="radio" checked />
    <label for="test1">About us</label>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</div>
<div>
    <input id="test2" name="acctest" type="radio" />
    <label for="test2">About us</label>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</div>

CSS

.container ul{
background: rgba(255, 255, 255, 0.5);
margin: 0px;
overflow: hidden;
height: 0px;
position: relative;
    margin: 0;
z-index: 1;
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.9s linear;}
.container li{
    height: 25px;
    color: #000;
    font-size: 12px;}
.container input:checked ~ ul{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    max-height: 50px;}

更新された jsfiddle リンク: http://jsfiddle.net/ETaXr/2/

再度、感謝します！

4

2 に答える 2

0

そのため、 CSS トランジションの自動高さが機能していないことがわかりました (リンクのタイトルをクリックしてください)。

回答とフィドルリンクについては、Christofer Vilander に小道具を提供します。

フィドルをラジオ ボタン (デモではチェックボックスを使用) に合わせて編集し、いくつかのクラス/ID 名を変更しました...そしてうまくいきました... UL を自分よりも多く定義する必要があったようです。

http://jsfiddle.net/3WK9Y/11/

<div class="ac-container">
<div>

    <input id="ac-1" name="accordion-1" type="radio" checked/>
    <ul class="ac-small">
        <li>Some content</li>
    </ul>
    <label for="ac-1">About us</label>

</div>    

<div>    
    <input id="ac-2" name="accordion-1" type="radio" />
    <ul class="ac-small">
        <li>Some more content</li>
        <li>test</li>
    </ul>
    <label for="ac-2">About us</label>
</div>
</div>

css plz のフィドルを参照してください... はるかに長く、より詳細です。

于 2013-05-14T02:19:25.783 に答える
0

この件について、クリストファーとエレメンタルシンの両方からの断片的な情報から、なんとか何かをまとめることができました。関連する css3 をよりよく理解するには、fiddleを参照してください。上記の例では、2 番目の項目をクリックした後にしか項目を閉じることができなかったため、この変更ははるかにうまく機能します。ここでそれらを切り替えることができます。

<div class="css3-acc">
<input id="css3-acc-def" type="radio" name="ccs3-acc-grp" checked="checked" />

<label>
  <input class="inner" type="radio" name="ccs3-acc-grp" />
  <h3>Item 1</h3>
  <label for="css3-acc-def"></label>
  <ul>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
  </ul>
</label>   

</div>
于 2013-10-17T14:47:51.203 に答える