折叠取消折叠三行的 JavaScript

Question

嗨，有人可以帮我如何根据我选择的行将加号更改为减号，我设法从加号更改为减号，但现在它正在改变所有这些不是我单击的那个。

嗨，有人可以帮助我如何根据我选择的行将加号更改为减号，我设法从加号更改为减号，但现在它正在为所有这些人更改，而不是我单击的那个。

ipt type="text/javascript">
$(document).ready(function() {
$('.collapse.in').prev('.panel-heading').addClass('active');
$('#accordion, #bs-collapse')
.on('show.bs.collapse', function(a) { 
$(this).find('.add').hide();    
$(this).find('.remove').show();
$(a.target).prev('.panel-heading').addClass('active');
})
.on('hide.bs.collapse', function(a) {
$('.add').show();    
$('.remove').hide();
$(a.target).prev('.panel-heading').removeClass('active');
});
});

.panel {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #fff;
background: none;
box-shadow: none;
}
.panel:last-child {
border-bottom: none;
}
.panel-group > .panel:first-child .panel-heading {
border-radius: 4px 4px 0 0;
}
.panel-group .panel {
border-radius: 0;
}
.panel-group .panel + .panel {
margin-top: 0;
}
.panel-heading {
background-color: white;
border-radius: 0;
color: #f8971c;
border-top: 1px solid #dedede;
border-radius: 0!important;
padding: 0;
}
.panel-title a {
display: block;
padding: 40px;
font-family: Roboto;
font-size: 20px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.2;
letter-spacing: normal;
text-align: left;
color: #f89921;
}
.panel-title{
margin-bottom: 0;
}
.panel-body {
background: #fff;
}
.panel:last-child .panel-body {
border-radius: 0 0 4px 4px;
}
.panel:last-child .panel-heading {
border-radius: 0 0 4px 4px;
transition: border-radius 0.3s linear 0.2s;
}
.panel:last-child .panel-heading.active {
border-radius: 0;
transition: border-radius linear 0s;
}
/* #bs-collapse icon scale option */
.panel-heading a:before {
content: 'e146';
position: absolute;
font-family: 'Material Icons';
right: 5px;
top: 10px;
font-size: 24px;
transition: all 0.5s;
transform: scale(1);
}
.panel-heading.active a:before {
content: ' ';
transition: all 0.5s;
transform: scale(0);
}
#bs-collapse .panel-heading a:after {
content: ' ';
font-size: 24px;
position: absolute;
font-family: 'Material Icons';
right: 5px;
top: 10px;
transform: scale(0);
transition: all 0.5s;
}
#bs-collapse .panel-heading.active a:after {
content: 'e909';
transform: scale(1);
transition: all 0.5s;
}
/* #accordion rotate icon option */
#accordion .panel-heading a:before {
content: 'e316';
font-size: 24px;
position: absolute;
font-family: 'Material Icons';
right: 5px;
top: 10px;
transform: rotate(180deg);
transition: all 0.5s;
}
#accordion .panel-heading.active a:before {
transform: rotate(0deg);
transition: all 0.5s;
}
.remove{
display:none;
}

<div class="container">
<div>

<div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
tt
<i class="material-icons add-icon add">add</i>
<i class="material-icons add-icon remove">remove</i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
tekst
</div>
</div>
</div>
<!-- end of panel -->
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
text
<i class="material-icons add-icon add">add</i>
<i class="material-icons add-icon remove">remove</i>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
tekst tekst
</div>
</div>
</div>
<!-- end of panel -->
<div class="panel">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
tee
<i class="material-icons add-icon add">add</i>
<i class="material-icons add-icon remove">remove</i>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
tekst tekst
</div>
</div>
</div>
<!-- end of panel -->

<!-- end of panel -->
</div>

请在这里提供任何帮助，当我单击一行或面板时，加号变为减号，但仅适用于该行。我不知道是否有人明白我想说什么。

Answer 1

I ...也许知道你遇到了什么。让我为你举个例子。

单击控制按钮以隐藏该行，然后再次单击以显示该行。

$(".row .controlBtn").click(function(){
var btn = $(this);
var elem_row = btn.parent().parent();
var elem_rowContent = elem_row.find(".rowContent");
var display_status = elem_rowContent.css("display");
if(display_status == "none"){
//Show
btn.text("Hide");
elem_rowContent.css("display", "block");
}else{
//Hide
btn.text("Show");
elem_rowContent.css("display", "none");
}
});

div{
border: 1px solid #000;
margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row1" class="row">
<div class="rowPanel">
<span class="controlBtn">Hide</span>
</div>
<div class="rowContent">
<p>This is row 1 content</p>
</div>
</div>
<div id="row2" class="row">
<div class="rowPanel">
<span class="controlBtn">Hide</span>
</div>
<div class="rowContent">
<p>This is row 2 content</p>
</div>
</div>
<div id="row3" class="row">
<div class="rowPanel">
<span class="controlBtn">Hide</span>
</div>
<div class="rowContent">
<p>This is row 3 content</p>
</div>
</div>