修改这个jQuery手风琴插件，以便第一个标签在加载时打开

Question

我正在使用我为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>

Answer 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>

Answer 2

在document.ready function，

的末尾添加

$('.accordion .item .heading').eq(0).click();

或

$('.accordion .item .heading').first().click();

或

$('.accordion .item .heading:first').click();