如何在单击另一行时关闭另一行

Question

我正在将数据提取到表中，并在单击任何表行时在表行中打开一个嵌套的colspan。 如果我单击另一个表格行，我想关闭上一个表格行（就像手风琴一样）

这是我的Vue文件

                                   {{index + 1}}                                        {{statement.paper_quality_id.paper_quality}}-                     {{statement.paper_size_id.length}} X {{statement.paper_size_id.width}}-                     {{statement.paper_brand_id.paper_brand}}-                     {{statement.thickness}}                                                                                  

  

{{Math.ceil（（statement.in_total_before-statement.total_out_before）/ 500）}}                                                                     

              <td>
                <div class="row">
                  <div
                    class="col-md-4 text-center"
                  >{{Math.floor((statement.total_sheets_in_range)/500)}}</div>
                  <div
                    class="col-md-4 text-center"
                  >{{Math.floor((statement.total_sheets_in_range)%500)}}</div>
                </div>
              </td>

              <td>
                <div class="row">
                  <div
                    class="col-md-4 text-center"
                  >{{Math.floor((statement.total_outward_range)/500)}}</div>
                  <div
                    class="col-md-4 text-center"
                  >{{Math.floor((statement.total_outward_range)%500)}}</div>
                </div>
              </td>

              <td>
                <div class="row">
                  <div class="col-md-4 text-center">
                    {{
                    Math.floor((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)/500)
                    }}
                  </div>
                  <div class="col-md-4 text-center">
                    {{
                    Math.floor((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)%500)
                    }}
                  </div>
                </div>
              </td>
            </tr>
            <tr :id="'show_'+index" style="display : none">
              <td colspan="6">
                <table class="table table-hover">
                  <tr>
                    <th>Date</th>
                    <th>Opening</th>
                    <th>Inward</th>
                    <th>Outward</th>
                    <th>Balance</th>
                  </tr>
                  <tr v-for="(_statement,index) in statements_details">
                    <td>{{_statement.date}}</td>

                    <td>
                      <div class="row">
                        <div
                          class="col-md-3 text-center"
                        >{{Math.ceil((_statement.opening.total_in - _statement.opening.total_out)/500)}}</div>
                        <div
                          class="col-md-3 text-center"
                        >{{Math.ceil((_statement.opening.total_in - _statement.opening.total_out)%500)}}</div>
                      </div>
                    </td>
                    <td>
                      <div class="row">
                        <div class="col-md-3 text-center">{{Math.ceil((_statement.inward)/500)}}</div>
                        <div class="col-md-3 text-center">{{Math.ceil((_statement.inward)%500)}}</div>
                      </div>
                    </td>
                    <td>
                      <div class="row">
                        <div
                          class="col-md-3 text-center"
                        >{{Math.ceil((_statement.outward)/500)}}</div>
                        <div
                          class="col-md-3 text-center"
                        >{{Math.ceil((_statement.outward)%500)}}</div>
                      </div>
                    </td>
                    <td>
                      <div class="row">
                        <div
                          class="col-md-3 text-center"
                        >{{Math.ceil((_statement.outward)/500)}}</div>
                        <div
                          class="col-md-3 text-center"
                        >{{Math.ceil((_statement.outward)%500)}}</div>
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </tbody>

这是我的js文件

PostLedgerID（e）{       e.preventDefault（）;

  const AccountDetail = {
    id: this.id,
    start_date: this.start_date + ' 00:00:00.957761',
    end_date: this.end_date + ' 00:00:00.957761'
  }
  var vm = this;
  axios.post('/Statement/', AccountDetail)
    .then((response) => {
      console.log(response)
      vm.statements = response.data;

    }).catch((err) => {
      console.log(err)
    });
},

//Show Hide Nested Table
statementDetail(rowid, paper_id, brand_id, size_id, thickness) {

  const userDetail = {
    account_access_key_id: $('#ledger_id').val(),
    start_date: this.start_date + ' 00:00:00.957761',
    end_date: this.end_date + ' 00:00:00.957761',
    paper_quality_id: paper_id,
    paper_brand_id: brand_id,
    paper_size_id: size_id,
    thickness: thickness
  }
  axios.post('/StatementDetail/', userDetail)
    .then((response) => {
      console.log(userDetail)
      $('#show_' + rowid).toggle();


      this.statements_details = response.data;
    }).catch((err) => {
      console.log(err)
    });
}