如何使第一个手风琴选项卡默认打开



我想让这个手风琴的第一个选项卡默认打开。

下面是cssdeck上的代码:http://cssdeck.com/labs/5jlzqlt6

如果您使用bootstrap,您可以跳过所有这些复杂的东西,只需在默认情况下要展开的accordion部分的折叠类后面添加一个单词:

class="collapse in"

哇,真简单。

看到 jsfiddle

添加到你的CSS

#accordion ul li:first-child div { 
    display:block;
    border-top:3px solid #FFCDCD;
} 

我还做了一个jq(在匆忙中)使手风琴工作得更好

代码:

$("#accordion ul li").each(function(){
var trigger= $(this).find('a')
var siblings = $(this).siblings()
var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){
    var visible_text = siblings.find('.accordion').filter(":visible")
    $(acc_text).slideToggle()
    $(visible_text).slideUp()
    });
});

编辑:如果我说对了。您希望能够在同一时间打开所有选项卡。

code:

$("#accordion ul li").each(function(){
var trigger= $(this).find('a')
var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){
        $(acc_text).slideToggle()
    });
});

或者你想当你点击eg上的"例子二"所有3个标签一次打开?真奇怪:)你为什么要那样做呢?

片段

$("#accordion ul li").each(function(){
    var trigger= $(this).find('a')
    var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){
      
        $(acc_text).slideToggle()
  
    });
});
body{
background:#d0d0d5;
}
/*  Basic stucture
=====================*/
#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}

/*  Colors 
====================*/
#accordion ul{
/*box-shadow*/
-webkit-box-shadow:0 4px 10px #BDBDBD;
   -moz-box-shadow:0 4px 10px #BDBDBD;
        box-shadow:0 4px 10px #BDBDBD;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
#accordion ul li a{
background:#fff;
border-bottom:1px solid #E0E0E0;
color:#999;
}
.accordion{
background:#fdfdfd;
color:#999;
}
.accordion:target{
border-top:3px solid #FFCDCD;
}
#accordion ul li:first-child div { 
display:block;
border-top:3px solid #FFCDCD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
  <ul>
    <li>
      <a href="#one">Example one</a>
      <div id="one" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
    <li>
      <a href="#two">Example two</a>
      <div id="two" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>    
    <li>
      <a href="#three">Example three</a>
      <div id="three" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
  </ul>
</div>

您可以通过触发点击事件来完成jQuery

$(function(){
    $('#accordion ul li a').eq(0).trigger('click');
});

解决方案no。3对我有用。谢谢你!如果您正在使用引导手风琴,并希望其中一个手风琴应该在第一次打开,那么添加class="in"

的例子:

<div class="in"
     data-toggle="collapse"
     data-parent="#amway-global-accordion"
     data-target="#ourCompanyOne"
     aria-expanded="true"
     aria-controls="ourCompanyOne">
</div>

最新更新