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

（抱歉英语不好哈哈）我有一个带有“字形图标V形向下”图标的span，当我点击它时，它应该会显示一些信息，并将图标更改为“字形图标V形向上”，它工作正常。现在，我的span删除了“down”类，添加了“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>";

改用

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”）。在（“单击”，函数（）上{
$（this.toggleClass（'down-up'）；
$（this.this（'p'）.fadeToggle（）；
});
.down{color:red；}
.up{color:green；}

上下
淡入淡出切换。
我尝试过，图标会更改为ok，但当我单击“向上”时，子文件会一直显示，在哪里可以更改？（非常感谢您的帮助！！）该子文件不在必须包含在其中的单击事件范围内。