广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

随着互联网的发展，页面交互效果越来越重要，而点击展开、收起内容就是一种很实用的效果。在前端开发中，使用jQuery可以轻松实现这一效果，接下来就让我们来学习如何实现点击显示隐藏行的效果。

首先，我们来看一下需要实现的效果。

上图中，有一个表格，其中包含多行内容。默认情况下，每一行内容都是隐藏的，只有当我们点击相应的鼠标图标时，才会展开或收起相应的行内容。

首先，我们需要建立相应的HTML结构：

<table>  <thead>    <tr>      <th>产品名称</th>      <th>数量</th>      <th>价格</th>    </tr>  </thead>  <tbody>    <tr>      <td>        产品1      </td>      <td>        50      </td>      <td>        $100      </td>      <td>        <i class="fa fa-plus-circle"></i>        <i class="fa fa-minus-circle"></i>      </td>    </tr>    <tr class="hide">      <td colspan="4">        <div class="inner">          <p>产品1介绍</p>        </div>      </td>    </tr>    <tr>      <td>        产品2      </td>      <td>        100      </td>      <td>        $200      </td>      <td>         <i class="fa fa-plus-circle"></i>        <i class="fa fa-minus-circle"></i>      </td>    </tr>    <tr class="hide">      <td colspan="4">        <div class="inner">          <p>产品2介绍</p>        </div>      </td>    </tr>  </tbody></table>

我们建立了一个表格，其中包含了表头和表身，但是，我们希望表身中的内容默认是隐藏的。所以，我们需要使用CSS将其隐藏：

.hide {  display: none;}

在每一行内容的最后一个单元格中，我们添加了两个图标，分别用于展开和收起相应内容。这里使用了Font Awesome提供的图标字体。

接下来，就是实现思路。我们需要使用jQuery，来给相应的图标绑定点击事件，并且让其能够展开或收起相应行的内容。

$(document).ready(function(){  // 给展开图标绑定点击事件  $('.fa-plus-circle').click(function(){     var tr = $(this).parent().parent(); // 获取当前行    tr.next().show(); // 显示下一行    $(this).hide(); // 隐藏当前图标    tr.find('.fa-minus-circle').show(); // 显示收起图标  });  // 给收起图标绑定点击事件  $('.fa-minus-circle').click(function(){    var tr = $(this).parent().parent(); // 获取当前行    tr.next().hide(); // 隐藏下一行    $(this).hide(); // 隐藏当前图标    tr.find('.fa-plus-circle').show(); // 显示展开图标  });});

我们在document ready事件中，给展开图标和收起图标分别绑定了点击事件。当点击展开图标时，我们首先获取当前行，然后通过next()方法获取下一行内容，使其显示出来，同时隐藏当前图标，显示收起图标；当点击收起图标时，我们同样获取当前行，然后通过next()方法获取下一行内容，使其隐藏起来，同时隐藏当前图标，显示展开图标。这样，就实现了点击显示和隐藏行的效果。

最后，为了美化展示效果，我们添加一些CSS样式：

table {  border-collapse: collapse;  margin: 50px auto;}th, td {  border: 1px solid #ccc;  padding: 10px;  text-align: center;}th {  background-color: #f0f0f0;}.inner {  padding: 20px;}.fa {  font-size: 24px;  margin-right: 10px;  cursor: pointer;}.fa-plus-circle {  color: green;}.fa-minus-circle {  color: red;}

我们设置了表格的样式，每一行以及表头都有边框线和居中的文字，表头背景色为灰色；将展开和收起图标的字体大小设为24px，并添加字体颜色。

到这里为止，我们已经实现了点击显示隐藏行效果。如果在实际开发中，遇到类似的需求，可以依照上述思路和代码进行实现，将会使页面交互效果更为美观、易用。

以上就是行点击显示隐藏行 jquery的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~