0

アコーディオンのタブを開いたままにし、アクティブな状態にするにはどうすればよいでしょうか?

つまり、リスト 1 のアコーディオン ページにいた場合、ページに入るとそのアコーディオンが開き、もう一方のアコーディオンは閉じられます。

これまでのところ、JS Fiddleを作成しました。いくつかの方法を試しましたが、アコーディオンが完全に機能しなくなったようです。

コードは次のとおりです。

HTML

<div class="trigger-button"><span>List One</span></div>
        <div class="accordion">
                <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three</li>
            <li>Item Four</li>
            </ul>
        </div>

        <div class="trigger-button"><span>List Two</span></div>
        <div class="accordion">
            <ul>
           <li>Item One</li>
           <li>Item Two</li>
           <li>Item Three</li>
           <li>Item Four</li>
            </ul>
    </div>

CSS

.trigger-button {
float: left;
width: 100%;
padding: 10px 0 10px 0;
margin-bottom: 6px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);    
background-color: #CCC;
border: 1px solid #000;
color: #FFF;
font-size: 14px;
cursor:pointer;
text-align: center;
}
.trigger-button span {
padding-left: 0;
}
.trigger-button.active { 
background-color: #000;
color: #FFF;
}
.accordion {
float: left;
padding: 8px 15px 22px 15px;
}

JS

$('.trigger-button').click(function() {
    $(".trigger-button").removeClass("active")
    $('.accordion').slideUp('normal');
    if($(this).next().is(':hidden') == true) {
        $(this).next().slideDown('normal');
        $(this).addClass("active");
     } 
     });
    $('.accordion').hide();

前もって感謝します。

4

2 に答える 2

0

デフォルトで開きたいセクションに別のクラスを追加するだけです：

<div class="accordion open">

次に変更します。

$('.accordion').hide();

に：

$('.accordion:not(.open)').hide();
于 2013-07-16T09:22:31.257 に答える
0

のようなものを追加

$(this).next().toggelClass('active'); // switch .active class of the .accrodion div

クリックハンドラーに追加し、document.load で初期化を実行します。

$(document).load(function(){    
      $('.accordion').hide();
      $('.accordion.active').show();
});

.active次に、最初のページ読み込み後に開きたいタブのクラスを宣言的に設定できます。

于 2013-07-16T09:23:04.247 に答える