问候语堆栈溢出！
我正在努力解决jQuery按钮切换问题。
我使用Bootstrap 3.3.7的折叠功能在一个页面上显示多个(大约12个(可扩展的部分。塌陷功能非常好。我的问题是在单击按钮时，我想使用jQuery来处理这个问题。该按钮应该在两行文本("展开故事"one_answers"折叠故事"(之间切换，同时还有一个字体很棒的角度向上的胡萝卜，当部分展开或折叠时，它可以在上下之间切换。
在我的第一次尝试中，我相信有更好的方法，但这是我在缺乏经验的头脑中可以想到的——每次我点击"扩展故事"按钮，所有的"扩展故事》按钮都会改变。
出于某种原因，我无法让每一个点击的按钮都是独一无二的。我曾想过，也许我可以以某种方式使用.attr('aria-controls');来针对特定的按钮实例，因为这些按钮对页面上的每个按钮都是唯一的。
最后，我只需要点击按钮就可以更改其文本和上下胡萝卜。
我知道JS Fiddle并没有像我以前那样工作，希望它足够接近我想要做的事情。请帮我想出一个更好的jQuery解决方案。我感谢你的建议！非常感谢。
我有一个主要工作的
JSFiddle
希望能帮助说明我正在努力做什么以及我遇到了什么问题。
看看下面的例子是否能让你走上正轨：
演示：
jQuery(function ($) {
$('a.collapse-trigger').on('click', function () {
var $this = $(this);
if($($this.attr('href')).is(":visible")) {
$($this.attr('href')).slideUp();
$this.find('.col-txt')
.hide()
.siblings('.exp-txt')
.show();
} else {
$($this.attr('href')).slideDown();
$this.find('.exp-txt')
.hide()
.siblings('.col-txt')
.show();
}
});
});.col-txt {
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- First Title -->
<div class="container-wrapper container">
<div class="row">
<div class="col-md-12 story-content">
<h1 class="mb-2 mt-5">Our Team</h1>
</div>
</div>
</div>
<!-- First Story -->
<div class="collapse" id="c11">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs red text-center" role="tablist">
<li role="presentation" class="active float-none d-inline-block"><a href="#CFT_Staff" aria-controls="CFT_Staff" role="tab" data-toggle="tab">CFT Staff</a></li>
<li role="presentation" class=" float-none d-inline-block"><a href="#Trustees" aria-controls="gifts" role="tab" data-toggle="tab">Trustees</a></li>
<li role="presentation" class=" float-none d-inline-block"><a href="#Advisory_Council" aria-controls="Advisory_Council" role="tab" data-toggle="tab">Advisory Council</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content sort-by-team">
<div role="tabpanel" class="tab-pane fade in active" id="CFT_Staff">
<div class="row mb-5">
<div class="col-sm-3">
<span class="fs-16 text-uppercase fw-600 d-inline-block pb-4 mt-5">Sort by team:</span>
<a class="d-block mb-2 fs-16 fw-600 active" href="#">Leadership</a>
<a class="d-block mb-2 fs-16 fw-600" href="#">Donor Services & Relationships</a>
<a class="d-block mb-2 fs-16 fw-600" href="#">Finance & Administration</a>
<a class="d-block mb-2 fs-16 fw-600" href="#">Philanthropy & Grants</a>
<a class="d-block mb-2 fs-16 fw-600" href="#">Educate Texas</a>
<a class="d-block mb-2 fs-16 fw-600" href="#">Communications</a>
<a class="d-block mb-2 fs-16 fw-600" href="#">Nort Texas Giving Day & Gift Processing</a>
<a class="d-block mb-2 fs-16 fw-600" href="#">View All Staff</a>
</div>
<div class="col-sm-9 staff-list">
<div class="row mt-5">
<div class="col-sm-4">
<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_DaveScullin.jpg">
<span class="fs-18 d-block mb-1 text-center fw-600">David J. Scullin</span>
<span class="fs-14 d-block text-center pos-title">President & CEO</span>
</div>
<div class="col-sm-4">
<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_BethBull.jpg">
<span class="fs-18 d-block mb-1 text-center fw-600">Elizabeth W. Bull</span>
<span class="fs-14 d-block text-center pos-title">Senior Vice President and Chief Financial Officer</span>
</div>
<div class="col-sm-4">
<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_JohnFitzpatrick.jpg">
<span class="fs-18 d-block mb-1 text-center fw-600">John Fitzpatrick</span>
<span class="fs-14 d-block text-center pos-title">Executive Director, Educate Texas</span>
</div>
<div class="col-sm-4">
<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_SarahSnelson.jpg">
<span class="fs-18 d-block mb-1 text-center fw-600">Sarah Cotton Nelson</span>
<span class="fs-14 d-block text-center pos-title">Chief Philanthropy Officer</span>
</div>
<div class="col-sm-4">
<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_MonicaEgertSmith.jpg">
<span class="fs-18 d-block mb-1 text-center fw-600">Monica Egert Smith</span>
<span class="fs-14 d-block text-center pos-title">Chief Relationships Officer</span>
</div>
<div class="col-sm-4">
<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_SusanSwan-Smith.jpg">
<span class="fs-18 d-block mb-1 text-center fw-600">Susan Swan Smith</span>
<span class="fs-14 d-block text-center pos-title">Chief Giving Day Officer</span>
</div>
<div class="col-sm-4">
<img class="img-responsive mx-auto mb-2" src="../annual-report/images/gtang.jpg">
<span class="fs-18 d-block mb-1 text-center fw-600">George Tang</span>
<span class="fs-14 d-block text-center pos-title">Managing Director, Educate Texas</span>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="Trustees">...</div>
<div role="tabpanel" class="tab-pane fade" id="Advisory_Council">...</div>
</div>
</div>
</div>
</div>
</div>
<!-- First Story Expand -->
<div class="border-bottom-med-gray">
<div class="container">
<div class="row">
<div class="col-md-12">
<a class="dark-gray-text pt-3 pb-6 d-inline-block fs-14 text-uppercase btn-expand-story collapse-trigger" href="#c11" aria-expanded="false" aria-controls="c11">
<span class="exp-txt">Expand</span>
<span class="col-txt">Collapse</span>
Story
<i class="pl-1 fa fa-angle-down" aria-hidden="true"></i><i class="pl-1 fa fa-angle-up" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Second Title -->
<div class="container-wrapper container">
<div class="row">
<div class="col-md-12 story-content">
<h1 class="mb-2 mt-5">Introducing the New CFTexas.org</h1>
</div>
</div>
</div>
<!-- Second Story -->
<div class="collapse" id="c12">
<div class="container">
<div class="row pt-4">
<div class="col-sm-6">
<p>Our website has been completely redesigned with you in mind, to make giving easier, more effective and more enjoyable than ever before. Get inspired by browsing our library of impact stories, stay up-to-date on our community impact initiatives, meet our esteemed CFT experts and trustees, view upcoming events and more. Take a look around an... [missing full info]</p>
<a href="https://www.cftexas.org/" class="btn btn-text text-left mw-200 mb-0 d-block mt-5 fs-16" role="button"><span><span class="text-uppercase">Visit our new site</span></a>
</div>
<div class="col-sm-6">
<img class="img-responsive mx-auto" src="../annual-report/images/laptop.jpg">
</div>
</div>
</div>
</div>
<!-- Second Story Expand -->
<!-- First Story Expand -->
<div class="border-bottom-med-gray">
<div class="container">
<div class="row">
<div class="col-md-12">
<a class="dark-gray-text pt-3 pb-6 d-inline-block fs-14 text-uppercase btn-expand-story collapse-trigger" href="#c12" aria-expanded="false" aria-controls="c11">
<span class="exp-txt">Expand</span>
<span class="col-txt">Collapse</span>
Story
<i class="pl-1 fa fa-angle-down" aria-hidden="true"></i><i class="pl-1 fa fa-angle-up" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>你在正确的轨道上，但需要一些修改。您可以使用一些jQuery选择器，如.find()和.siblings()，只查找与单击的故事按钮相同的故事按钮相关的元素，而不是针对具有特定类名的所有元素。这允许您逐个更改文本和展开故事，而不是使用一个同时影响所有故事的处理程序。
注意，我从链接中删除了data-toggle="collapse"属性，并添加了一个collapse-trigger类。默认的引导3功能干扰了客户click事件。为了完成自定义处理程序，我需要停止默认功能的出现。
1(通过类来定位特定的可折叠按钮。必须创建一个。。。比方说".chevron toggle"2( 使用this使jquery脚本找到具有该特定类的特定按钮的carret3( 在jquery中切换类。
/*------------- css ------------*/
.rotate-chevron{
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.rotate-chevron.down{
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*------------- html ------------*/
<div class="chevron-toggle accordion-toggle collapsed" data-toggle="collapse" data-parent="#Accordion" data-target="#content_inside" aria-expanded="false">
<h4>
Edit Info
<i class="rotate-chevron fa fa-chevron-down"></i>
</h4>
</div>
<div id="content_inside" class=" collapse" aria-expanded="false">
hello
</div>
//JQuery Chevron rotation
$(document).ready(function() {
$('.chevron-toggle').click(function(e) {
$(this).find(".rotate-chevron").toggleClass("down");
});
});