如何使手风琴保持打开状态 [英] How to make accordion stay open

问题描述

如何使手风琴标签保持打开状态并使其处于活动状态?

How would one make an accordion tab remain open, giving it an active state?

即，如果我在列出一个手风琴"页面上，则该手风琴将在进入页面时打开，而另一个手风琴将关闭.

Ie., if I was on the List One accordion page, then that accordion would be open upon entering the page, and the other accordion would be closed.

我已经创建了一个JS小提琴.我尝试了几种不同的方法，但这似乎完全阻止了手风琴的工作.

I've created a JS Fiddle of where I am so far. I've tried a few different methods but it just seems to stop the accordion from working altogether.

这是代码:

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();

先谢谢了.

推荐答案

只需在要默认打开的部分中添加另一个类:

Just add another class to the sections you want to be default open:

<div class="accordion open">

然后更改:

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

收件人:

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

这篇关于如何使手风琴保持打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！