我希望当页面加载时,默认情况下应该打开第一个分区。如果用户想要打开第一个手风琴分区然后加载页面,第一个div将被打开,如果用户需要,将采取用户首选项将偏好改为二级分区,然后第二级分区将开启
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul class="accord">
<li> <a href="#">main link1</a>
<ul>
<li><a href="#">Link One</a>
</li>
<li><a href="#">Link Two</a>
</li>
<li><a href="#">Link Three</a>
</li>
<li><a href="#">Link Four</a>
</li>
<li><a href="#">Link Five</a>
</li>
</ul>
</li>
<li> <a href="#">main link2</a>
<ul>
<li><a href="#">Link One</a>
</li>
<li><a href="#">Link Two</a>
</li>
<li><a href="#">Link Three</a>
</li>
<li><a href="#">Link Four</a>
</li>
<li><a href="#">Link Five</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2>FOIS</h2>
<div class="content">content fois</div>
</li>
<li>
<h2>ASP</h2>
<div class="content">content ASP</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">content PTT</div>
</li>
</ul>
</div>
CSS
.wrap {
margin-left: 0px;
margin-top: 0px;
width: 100px;
}
.accordion1 {
width: 178px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
.accordion1 h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.accordion1 h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
.accordion1 li div.content {
padding: 3px;
background: #fcfbfb;
border-bottom: 1px solid #ddd;
/*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
padding: 0;
list-style-type: none;
}
.accord > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 12px;
color: #5f5c5c;
background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
text-decoration: none;
color: #5f5c5c;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
padding-left: 17px;
}
.accord > li > ul {
list-style-type: none;
text-align: left;
margin: 0;
padding: 1px;
}
.accord {
text-decoration: none;
padding-left: 5px;
}
.accord > li > a:hover {
color: #f8b106;
}
.accord > li > ul > li > a:hover {
color: #f8b106;
}
.accordion1 > li > h2.active{
background-color: red;
}
jquery的
jQuery(function ($) {
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function(){
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
})
})
答案 0 :(得分:1)
尝试在第一个h2
元素上触发点击事件
jQuery(function ($) {
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function(){
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
});
$h2s.first().click()
})