我的网站上有这个问题，当我加载页面时，我默认打开手风琴。当我点击它时，我希望它接近并打开。现在，当我加载页面时，我可以看到所有内容，我必须点击手风琴关闭的标题，它同时关闭所有标题（这是它应该从一开始就是这样的）。
这是JS：
accordion();
function accordion() {
$('.accordion-title').click(function (e) {
$(this).next().slideToggle('easeOut');
$(this).toggleClass('active');
$("accordion-title").toggleClass('active');
$(".accordion-content").not($(this).next()).slideUp('easeIn');
$(".accordion-title").not($(this)).removeClass('active');
});
$(".accordion-content").addClass("default-hidden");
HTML：
<section class="ptb ptb-sm-80">
<div class="container">
<div class="tabs b-lrb-none">
<ul>
<li><a href="#tabs-1">Multicultural Case Study</a></li>
</ul>
<div class="ui-tab-content">
<div id="tabs-1" class="plr-0">
<!-- Accordion -->
<div class="accordion">
<div class="accordion-section">
<h6 class="accordion-title">Challenge</h6>
<div class="accordion-content">
<p align="justify">Snow skiing in the Alps, an activity that as open and broad as it is, ironically is portrayed as being exclusive. It is exclusive for those who can afford the special gear, the right clothing and many times this translates into white, mid to upper class. With a growing multicultural population, and that segment representing a significant part of Millennials, who hold a high value for experiences, how do we help them feel that they can be part of this great outdoors experience and are more than welcome?</p>
</div>
</div>
<div class="accordion-section">
<h6 class="accordion-title">Solution</h6>
<div class="accordion-content">
<p align="justify">Talking to Millennials is definitely a start. They are more than willing to voice their opinions, and have a strong desire to be heard. We conducted several focus groups to make sure we heard what they had to say. But, that wasn’t enough. Why not explore their opinions in the one venue that has started this conversation? Outdoor snow skiing. We went the client’s snow skiing resort with Hispanics, Caucasians and African-Americans. Explored their reactions, the stereotypes and barriers surrounding these groups in relation to snow skiing, and formed a realistic picture of what truly makes this sport inclusive.</p>
</div>
</div>
<div class="accordion-section">
<h6 class="accordion-title">Results</h6>
<div class="accordion-content">
<p align="justify">Allowing Millennials to truly “experience” this sport, provided visual insights that will serve as Marketing campaigns. These campaigns are being developed with “real” images, expressions and moments that would connect these Millennials (Mainstream and Hispanic) with this no longer exclusive sport.</p>
</div>
</div>
</div>
和CSS：
.accordion-section {
border-top: 1px solid #f1f1f1;
border-left: 1px solid #f1f1f1;
border-right: 1px solid #f1f1f1;
}
.accordion-section:last-child {
border-bottom: 1px solid #f1f1f1;
}
.accordion-title {
cursor: pointer;
display: block;
position: relative;
padding: 20px 20px;
margin: 0px;
}
.accordion-title.active {
/*background: #fafafa;*/
color: #e6ae49;
}
.accordion-title:before {
content: "\f105";
display: block;
font-family: "FontAwesome",sans-serif !important;
position: absolute;
right: 18px;
font-weight: 400;
}
.accordion-title.active:before {
content: "\f107";
}
.accordion-content.default-hidden {
display: none;
margin: 0;
}
.accordion-content {
padding: 0 20px 10px;
}
任何帮助将不胜感激。
答案 0 :(得分：2)
$( function() {
$( "#accordion" ).accordion();
} ); <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<section class="ptb ptb-sm-80">
<div class="container">
<div class="tabs b-lrb-none">
<ul>
<li><a href="#tabs-1">Multicultural Case Study</a></li>
</ul>
<div class="ui-tab-content">
<div id="tabs-1" class="plr-0">
<!-- Accordion -->
<div id="accordion">
<h3>Challenge</h3>
<div>
<p align="justify">Snow skiing in the Alps, an activity that as open and broad as it is, ironically is portrayed as being exclusive. It is exclusive for those who can afford the special gear, the right clothing and many times this translates into white, mid to upper class. With a growing multicultural population, and that segment representing a significant part of Millennials, who hold a high value for experiences, how do we help them feel that they can be part of this great outdoors experience and are more than welcome?</p>
</div>
<h3>Solution</h3>
<div>
<p align="justify">Talking to Millennials is definitely a start. They are more than willing to voice their opinions, and have a strong desire to be heard. We conducted several focus groups to make sure we heard what they had to say. But, that wasn’t enough. Why not explore their opinions in the one venue that has started this conversation? Outdoor snow skiing. We went the client’s snow skiing resort with Hispanics, Caucasians and African-Americans. Explored their reactions, the stereotypes and barriers surrounding these groups in relation to snow skiing, and formed a realistic picture of what truly makes this sport inclusive.</p>
</div>
<h3>Results</h3>
<div>
<p align="justify">Allowing Millennials to truly “experience” this sport, provided visual insights that will serve as Marketing campaigns. These campaigns are being developed with “real” images, expressions and moments that would connect these Millennials (Mainstream and Hispanic) with this no longer exclusive sport.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
答案 1 :(得分：0)
$(function() {
$("h3").on( "click", function() {
$(this).next().slideToggle(200);
$expand = $(this).find(">:first-child");
});
});.accodion{display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="ptb ptb-sm-80">
<div class="container">
<div class="tabs b-lrb-none">
<ul>
<li><a href="#tabs-1">Multicultural Case Study</a></li>
</ul>
<div class="ui-tab-content">
<div id="tabs-1" class="plr-0">
<!-- Accordion -->
<div id="accordion">
<h3>Challenge</h3>
<div class="accodion">
<p align="justify">Snow skiing in the Alps, an activity that as open and broad as it is, ironically is portrayed as being exclusive. It is exclusive for those who can afford the special gear, the right clothing and many times this translates into white, mid to upper class. With a growing multicultural population, and that segment representing a significant part of Millennials, who hold a high value for experiences, how do we help them feel that they can be part of this great outdoors experience and are more than welcome?</p>
</div>
<h3>Solution</h3>
<div class="accodion">
<p align="justify">Talking to Millennials is definitely a start. They are more than willing to voice their opinions, and have a strong desire to be heard. We conducted several focus groups to make sure we heard what they had to say. But, that wasn’t enough. Why not explore their opinions in the one venue that has started this conversation? Outdoor snow skiing. We went the client’s snow skiing resort with Hispanics, Caucasians and African-Americans. Explored their reactions, the stereotypes and barriers surrounding these groups in relation to snow skiing, and formed a realistic picture of what truly makes this sport inclusive.</p>
</div>
<h3>Results</h3>
<div class="accodion">
<p align="justify">Allowing Millennials to truly “experience” this sport, provided visual insights that will serve as Marketing campaigns. These campaigns are being developed with “real” images, expressions and moments that would connect these Millennials (Mainstream and Hispanic) with this no longer exclusive sport.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>