我正在使用我为jQuery手风琴找到的一些代码,因为我不喜欢jQueryUI手风琴的动画。但是我想要的一件事就是让第一个标签在加载时自动打开。关于它的其他一切都很棒,如果有人有任何见解,我会很感激。
$(document).ready(function() {
$('.accordion .item .heading').click(function() {
var a = $(this).closest('.item');
var b = $(a).hasClass('open');
var c = $(a).closest('.accordion').find('.open');
if(b != true) {
$(c).find('.content').slideUp(200);
$(c).removeClass('open');
}
$(a).toggleClass('open');
$(a).find('.content').slideToggle(200);
});
});
.accordion {
width: 100%;
border-radius: 5px;
overflow: hidden;
position: relative;
left: 2em;
}
.accordion .item .heading {
height: 50px;
line-height: 50px;
font-size: 17px;
cursor: pointer;
color: #fff;
padding-left: 15px;
background: #ee6363 url('arrow.png') no-repeat;
background-position: right 20px top -95px;
border-bottom: 1px solid #ec8484;
box-sizing: border-box;
}
.accordion .item.open .heading, .accordion .item:last-child .heading {
border: 0;
}
.accordion .item.open .heading {
background-position: right 20px top -5px;
}
.accordion .item .content {
display: none;
padding: 15px;
background: #fff;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
<div class="item">
<div class="heading">This is the first heading</div>
<div class="content">This is the first content</div>
</div>
<div class="item">
<div class="heading">This is the second heading</div>
<div class="content">This is the second content</div>
</div>
<div class="item">
<div class="heading">This is the third title</div>
<div class="content">This is the third content</div>
</div>
</div>
答案 0 :(得分:1)
只需触发点击第一页上的第一页?
$(document).ready(function() {
$('.accordion .item .heading').click(function() {
var a = $(this).closest('.item');
var b = $(a).hasClass('open');
var c = $(a).closest('.accordion').find('.open');
if(b != true) {
$(c).find('.content').slideUp(200);
$(c).removeClass('open');
}
$(a).toggleClass('open');
$(a).find('.content').slideToggle(200);
}).first().trigger('click');
})
.accordion {
width: 100%;
border-radius: 5px;
overflow: hidden;
position: relative;
left: 2em;
}
.accordion .item .heading {
height: 50px;
line-height: 50px;
font-size: 17px;
cursor: pointer;
color: #fff;
padding-left: 15px;
background: #ee6363 url('arrow.png') no-repeat;
background-position: right 20px top -95px;
border-bottom: 1px solid #ec8484;
box-sizing: border-box;
}
.accordion .item.open .heading, .accordion .item:last-child .heading {
border: 0;
}
.accordion .item.open .heading {
background-position: right 20px top -5px;
}
.accordion .item .content {
display: none;
padding: 15px;
background: #fff;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
<div class="item">
<div class="heading">This is the first heading</div>
<div class="content">This is the first content</div>
</div>
<div class="item">
<div class="heading">This is the second heading</div>
<div class="content">This is the second content</div>
</div>
<div class="item">
<div class="heading">This is the third title</div>
<div class="content">This is the third content</div>
</div>
</div>
答案 1 :(得分:0)
在document.ready function,
的末尾添加$('.accordion .item .heading').eq(0).click();
或
$('.accordion .item .heading').first().click();
或
$('.accordion .item .heading:first').click();