当容器打开或关闭时，我有两个监听器。
但是当容器打开时所有图像都会改变，并且当容器同时关闭时所有图像都会改变。
我只希望打开的容器更改为负数，其余部分保留为加号图像，反之亦然。
我正在使用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
有什么建议吗？
答案 0 :(得分：0)
试试这个，我使用.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');
});
答案 1 :(得分：0)
以下是本地安全的方式。我还更新了你的jsfiddle：https://jsfiddle.net/salih0vicX/04uL9tqh/23/
Sub Kopieren()
Dim Zelle As Range
Dim i%
i = 7
For Each Zelle In Sheets("AufgabenListe").Range("B8:B12")
If Zelle <> "" Then
Zelle.Copy
Sheets("Mikro-RACI").Cells(i, "B").PasteSpecial Paste:=xlPasteValues
Application.CutCopyMode = False
End If
Next
End Sub
答案 2 :(得分：0)
将$('#accordion')更改为$('.panel')，如下所示：
$('.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").attr('src', 'https://s22.postimg.org/9takvqkal/Mathematic_Plus2.png');
});
这里是Demo