0

如何使手风琴选项卡保持打开状态，使其处于活动状态？

即，如果我在 List One 手风琴页面上，那么该手风琴将在进入该页面时打开，而另一个手风琴将关闭。

到目前为止，我已经创建了一个 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 回答