随着互联网的发展，页面交互效果越来越重要，而点击展开、收起内容就是一种很实用的效果。在前端开发中，使用jquery可以轻松实现这一效果，接下来就让我们来学习如何实现点击显示隐藏行的效果。
实现效果
首先，我们来看一下需要实现的效果。
上图中，有一个表格，其中包含多行内容。默认情况下，每一行内容都是隐藏的，只有当我们点击相应的鼠标图标时，才会展开或收起相应的行内容。
HTML结构
首先，我们需要建立相应的HTML结构：
| 产品名称 | 数量 | 价格 | |
|---|---|---|---|
| 产品1 | 50 | $100 | |
|
产品1介绍 |
|||
| 产品2 | 100 | $200 | |
|
产品2介绍 |
|||
我们建立了一个表格，其中包含了表头和表身，但是，我们希望表身中的内容默认是隐藏的。所以，我们需要使用CSS将其隐藏：
.hide {
display: none;
}在每一行内容的最后一个单元格中，我们添加了两个图标，分别用于展开和收起相应内容。这里使用了Font Awesome提供的图标字体。
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，并添加字体颜色。
到这里为止，我们已经实现了点击显示隐藏行效果。如果在实际开发中，遇到类似的需求，可以依照上述思路和代码进行实现，将会使页面交互效果更为美观、易用。
