行をクリックして非表示の行を表示するjquery-フロントエンドQ&A-php.cn

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

实现效果

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

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

HTML结构

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

   产品名称  数量  价格  
 
    产品1   50   $100      
    产品1介绍
 
  
   产品2   100   $200      
    产品2介绍

产品名称	数量	价格
产品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，并添加字体颜色。

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

以上が行をクリックして非表示の行を表示するjqueryの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。