行点击显示隐藏行 jquery-前端问答-PHP中文网

行点击显示隐藏行 jquery

王林

发布： 2023-05-28 09:53:07

原创

364人浏览过

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

实现效果

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

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

HTML结构

首先，我们需要建立相应的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提供的图标字体。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

jQuery实现点击显示隐藏

接下来，就是实现思路。我们需要使用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样式

最后，为了美化展示效果，我们添加一些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的详细内容，更多请关注php中文网其它相关文章！