演示

Question

我有多个表格，需要单击字体真棒图标分别显示/隐藏。图标必须从右V形（隐藏）更改为向下V形（打开），反之亦然。

我还有一个按钮来显示/隐藏所有工作正常的表，除了我希望关闭所有表开始之外。

    $(document).ready(function(){
  $(".btn_hide").click(function(){
    $("table").hide();
  });
  $(".btn_show").click(function(){
    $("table").show();
  });
});

这里是代码https://jsfiddle.net/tdd75/hkyep1ma/59/

的链接

Answer 1

您可以使用toggle()和next()机制。

我在这里添加了一些CSS以及一个类show-table和tableLink使其更加简单

$(document).ready(function(){
  $(".btn_hide").click(function(){
    $("table").hide();
    $("table").prev('p').removeClass('show-table');
  });
  $(".btn_show").click(function(){
    $("table").show();
    $("table").prev('p').addClass('show-table');
  });
  
  $(document).on('click','.tableLink',function(){
      $(this).parents('p').next().toggle();
      $(this).parents('p').toggleClass('show-table');
  });
});

table {
  border-collapse: collapse;
  width: 100%;
  display:none;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

i.fa.fa-chevron-down {
  display:none
}

.show-table i.fa.fa-chevron-down {
  display:inline-block
}
.show-table i.fa.fa-chevron-right {
  display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button class="btn_hide">Hide All</button>
<button class="btn_show">Show All</button>


<p>
  <a class="tableLink">
    <i class="fa fa-chevron-right"></i>
    <i class="fa fa-chevron-down"></i>
  </a>
  <a href="#" class="tableLink"> Link to external page</a>
</p>

<table class="data_table">
  <tr>
    <th>tableheader</th>
    <th>tableheader</th>
    <th>tableheader</th>
  </tr>
  <tr>
    <td>tabledata</td>
    <td>tabledata</td>
    <td>tabledata</td>
  </tr>
  <tr>
    <td>tabledata</td>
    <td>tabledatag</td>
    <td>tabledata</td>
  </tr>
</table>

<p>
  <a class="tableLink">
    <i class="fa fa-chevron-right"></i>
    <i class="fa fa-chevron-down"></i>
  </a>
  <a href="#" class="tableLink"> Link to external page</a>
</p>

<table class="data_table hide-table">
  <tr>
    <th>tableheader</th>
    <th>tableheader</th>
    <th>tableheader</th>
  </tr>
  <tr>
    <td>tabledata</td>
    <td>tabledata</td>
    <td>tabledata</td>
  </tr>
  <tr>
    <td>tabledata</td>
    <td>tabledatag</td>
    <td>tabledata</td>
  </tr>
</table>
<p>
  <a class="tableLink">
    <i class="fa fa-chevron-right"></i>
    <i class="fa fa-chevron-down"></i>
  </a>
  <a href="#" class="tableLink"> Link to external page</a>
</p>

<table class="data_table hide-table">
  <tr>
    <th>tableheader</th>
    <th>tableheader</th>
    <th>tableheader</th>
  </tr>
  <tr>
    <td>tabledata</td>
    <td>tabledata</td>
    <td>tabledata</td>
  </tr>
  <tr>
    <td>tabledata</td>
    <td>tabledatag</td>
    <td>tabledata</td>
  </tr>
</table>

Answer 2

以下代码可按您的要求工作。我更改了“隐藏/显示所有”按钮的类，以便可以分别定位它们。

每个单独的显示/隐藏按钮都被包装在div类的.table-wrapper中，其中包括相应的table作为孩子。我认为这比使用.sibling()命令要强一些，并且还可以通过在该包装器中添加额外的表来切换多个表。

这样，您可以通过单个按钮或所有按钮添加/删除.hide-tables类。然后，可以使用一些基本的CSS来执行您希望执行的操作。

让我知道这是否不是您所希望的。

演示

// Add click event to individual hide buttons
$(".btn_hide").click(function() {

  // Travel up DOM tree to nearest .table-wrapper and add .hide-tables
  $(this).closest(".table-wrapper").toggleClass("hide-tables");

});

// Add click event to show all button
$(".btn_show_all").click(function() {

  // Remove hide-tables class from all wrappers
  $(".table-wrapper").removeClass("hide-tables");

});

// Add click event to hide all button
$(".btn_hide_all").click(function() {

  // Add hide-tables class to all wrappers
  $(".table-wrapper").addClass("hide-tables");

});

table {
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.table-wrapper:not(.hide-tables) .fa-chevron-right {
  display: none;
}

.hide-tables .fa-chevron-right {
  display: inherit;
}

.hide-tables table,
.hide-tables .fa-chevron-down {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button class="btn_hide_all">Hide All</button>
<button class="btn_show_all">Show All</button>

<div class="table-wrapper">
  <p>
    <a class="btn_hide">
      <i class="fa fa-chevron-right"></i>
      <i class="fa fa-chevron-down"></i>
    </a>
    <a href="#"> Link to external page</a>
  </p>

  <table>
    <tr>
      <th>tableheader</th>
      <th>tableheader</th>
      <th>tableheader</th>
    </tr>
    <tr>
      <td>tabledata</td>
      <td>tabledata</td>
      <td>tabledata</td>
    </tr>
    <tr>
      <td>tabledata</td>
      <td>tabledatag</td>
      <td>tabledata</td>
    </tr>
  </table>

</div>

<div class="table-wrapper">
  <p>
    <a class="btn_hide">
      <i class="fa fa-chevron-right"></i>
      <i class="fa fa-chevron-down"></i>
    </a>
    <a href="#"> Link to external page</a>
  </p>

  <table class="data_table">
    <tr>
      <th>tableheader</th>
      <th>tableheader</th>
      <th>tableheader</th>
    </tr>
    <tr>
      <td>tabledata</td>
      <td>tabledata</td>
      <td>tabledata</td>
    </tr>
    <tr>
      <td>tabledata</td>
      <td>tabledatag</td>
      <td>tabledata</td>
    </tr>
  </table>

</div>
<div class="table-wrapper">

  <p>
    <a class="btn_hide">
      <i class="fa fa-chevron-right"></i>
      <i class="fa fa-chevron-down"></i>
    </a>
    <a href="#"> Link to external page</a>
  </p>

  <table class="data_table">
    <tr>
      <th>tableheader</th>
      <th>tableheader</th>
      <th>tableheader</th>
    </tr>
    <tr>
      <td>tabledata</td>
      <td>tabledata</td>
      <td>tabledata</td>
    </tr>
    <tr>
      <td>tabledata</td>
      <td>tabledatag</td>
      <td>tabledata</td>
    </tr>
  </table>

</div>

使用jQuery隐藏/显示表-选择隐藏/显示单个表或显示/隐藏所有表

2 个答案:

演示