单个元素中的两个事件[Jquery]

Question

（抱歉英语不好哈哈）我有一个带有“glyphicon-chevron-down”图标的跨度，当我点击它时，它应该显示一些信息并将图标更改为“glyphicon-chevron-up”，并且它工作正常。所以现在，我的跨度删除了“向下”类，我添加了“向上”类，好的。但我需要另一个事件，因为当用户点击“glyphicon-chevron-up”时，这个事件应该与之前相反（遵循代码和页面打印）：

PHP 代码：

echo "<li class='folder list-group-item' id=\"".$folder['Folder']['folder_id']."\">".$space."
      <span class='glyphicon glyphicon-folder-open'></span>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".$folder['Folder']['name']."
      <a href='#'><span name='rotate' class='pull-right glyphicon glyphicon-chevron-down'>
      </span></a><br>";

JQuery 代码：

$(".subfile").hide();

$(".glyphicon-chevron-down").on("click", function(){
  parents = $(this).parents('li:first');
  $(parents).siblings('li').fadeIn();
  $(this).removeClass('glyphicon-chevron-down');
  $(this).addClass('glyphicon-chevron-up');
});

$(".glyphicon-chevron-up").on("click", function(){
  parents = $(this).parents('li:first');
  $(parents).siblings('li').fadeOut();
  $(this).removeClass('glyphicon-chevron-up');
  $(this).addClass('glyphicon-chevron-down');
});

页面打印：

(The page starts this way)

(When click in the 'up' icon, should back to previous state)

如果需要更多信息，请在 cmets 上提问，我会放在这里！非常感谢！

Answer 1

改用toggleClass() 和fadeToggle()：

$(".glyphicon-chevron-down").on("click", function(){
  parents = $(this).parents('li:first');
  $(parents).siblings('li').fadeToggle(); // fadeToggle
  $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

一个示例测试用例：

$(".down").on("click", function() {
  $(this).toggleClass('down up');
  $(this).siblings('p').fadeToggle();
});

.down {color: red;}
.up {color: green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='down'>up-down</button>
<p>fade it toggle too.</p>