折叠/打开一个字体很棒的图标表

Collapse/Open a table with font-awesome icon

本文关键字：字体 图标 一个 折叠      更新时间：2023-09-26

当前我的标签是可折叠的，它折叠了一个表。我想添加字体真棒图标的标签或标题；向下插入符号表示打开的表，向右插入符号表示关闭或折叠的表。这应该在点击时发生。

我在这里制作了一把小提琴https://jsfiddle.net/gjk3zepd/2/

这可以解决你的问题

jQuery

$(document).ready(function(){
  $('.collapse').hide();
  $('.content').hide();
  $('.expand, .collapse').bind('click',function(){
    $('.collapse').toggle();
    $('.expand').toggle();
    $('.content').slideToggle();
  });
});

HTML

<a href="#" class="expand"><span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" class="collapse"><span class="glyphicon glyphicon-chevron-down"></span></a>
<div class="content">
Div Content
</div>

我猜您正试图使用单个图标来实现切换。此代码可能很有用。

$("a").click(function(){
  if($("div.content").is(':hidden')){
    $("div.content").show();
    $(this).addClass('toggle');
  }else{
    $(this).removeClass('toggle');
}    
});
a i.fa-angle-down{display:none;}
a i.fa-angle-up{display:block;}
a.toggle i.fa-angle-down{display:block;}
a.toggle i.fa-angle-up{display:none;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle</title>
  
</head>
  <body>
    <a class="toggle">
  <i class="fa fa-angle-down"></i>
  <i class="fa fa-angle-up"></i>
</a>
</body>
</html>

相关文章：