單個元素中有兩個事件[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'); }); 

頁面打印：

（頁面以這種方式開始）

（單擊“向上”圖標時，應返回到以前的狀態）

如果需要更多信息，請詢問評論，我會放在這里！ 非常感謝！

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>