Question

如何让手风琴标签保持打开状态，使其处于活跃状态？

也就是说，如果我在List One手风琴页面上，那么手风琴将在进入页面时打开，另一个手风琴将被关闭。

我创建了a 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();

提前致谢。

Answer 1

只需将另一个类添加到要默认打开的部分：

<div class="accordion open">

然后改变：

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

要：

$('.accordion:not(.open)').hide();

Answer 2

添加类似

的内容

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

到你的click-handler并在document.load上运行初始化：

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

然后，您可以声明性地为要在初始页面加载后打开的选项卡设置.active类。

如何让手风琴保持开放状态

2 个答案: