我想让这个手风琴的第一个选项卡默认打开。
下面是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>