javascript - 折叠 uncollapse 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

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

点击控制按钮隐藏行，再次点击显示。

$(".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>