javascript - 单个元素中的两个事件 [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)

如果需要更多信息，请在评论中询问，我会放在这里!非常感谢!

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>