当容器打开或关闭时，我有两个监听器。
但是，当容器打开时，所有图像都会发生变化，而当容器同时关闭时，所有图像也会发生变化。
我只想将打开的容器更改为减号，其余部分保留为加号图像，反之亦然。
我正在使用 bootstrap 来实现可折叠容器功能。
以下是我目前拥有的:
$('#accordion').on('shown.bs.collapse', function(e) {
$(this).find(".panel-icon").attr('src', 'https://s22.postimg.org/hkrauaofx/Mathematic_Minus2.png');
});
$('#accordion').on('hidden.bs.collapse', function(e) {
$(this).find(".panel-icon").attr('src', 'https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png');
});.container {
width: 75%;
}
.head {
background: #D9DBDE;
}
.panel-heading {
background-color: #D9DBDE;
padding: 20px;
margin-bottom: 10px;
border-radius: 0;
}
.panel-title {
font-size: 21px;
display: block;
width: 100%;
color: #4F5858;
line-height: 1.3;
font-weight: normal;
}
.panel-icon {
width: 30px;
padding: 5px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<form action="/update" id="formwrite">
<div class="panel-group secondary-bridge container" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title va-middle">Tab 1
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
</h4>
</div>
<div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-default">
<div class="panel-heading">
Tab 1
</div>
<div class="panel-body row fieldpos">
<fieldset class="form-group textwide">
<label for="vmrecord">Email</label>
<input type="email" class="form-control" id="vmrecord" placeholder="Enter Email" required>
</fieldset>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title va-middle">Tab 2
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo">
</h4>
</div>
<div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-default">
<div class="panel-heading">
Tab 2
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title va-middle">Tab 3
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeThree" aria-expanded="true" aria-controls="collaspeThree">
</h4>
</div>
<div id="collaspeThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-default">
<div class="panel-heading">
Tab 3
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">Tab 4
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-default">
<div class="panel-heading">
Tab 4
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">Tab 5
<img src='https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-default">
<div class="panel-heading">
Tab 5
</div>
</div>
</div>
</div>
</div>
</form>
</body>这是JSFiddle
有什么建议吗？
最佳答案
试试这个，我使用了 .panel 而不是 #accordion，使用 #accordion (this).find 将找到其中的所有 img。
$('.panel').on('shown.bs.collapse', function(e) {
$(this).find(".panel-icon").attr('src', 'https://s22.postimg.org/hkrauaofx/Mathematic_Minus2.png');
});
$('.panel').on('hidden.bs.collapse', function(e) {
$(this).find(".panel-icon.collapsed").attr('src', 'https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png');
});
关于javascript - 仅更改折叠容器的图像 src，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39744334/