javascript - 多级折叠侧边栏箭头方向改变

Question

我正在制作一个多级折叠侧菜单，我使用 bootstrap 和 jquery 来实现它。但问题是，当我单击链接时，所有箭头都会同时改变方向 html 是

<li>
     <div class="col-sm-12" style="background: #1f3d74;color: #ccc;"><span>MAIN NAVIGATION MENU</span></div>
</li>
<li> <a href="#1" ><span class="fa fa-dashboard"></span>  Dashboard</a></li>
<li><a href="#1" data-toggle="collapse" > <span class=""><span class="fa fa-wrench"></span> UI Elements</span> <i class="fa fa-angle-left pull-right"></i> </a>
    <ul class="sidebar-nav-second-level collapse" id="1">
         <li> <a href="javascript:void(0)">Menu 1</a> </li>
         <li> <a href="javascript:void(0)">Menu 2</a> </li>
         <li class="third-level"> 
             <a href="#12" data-toggle="collapse" > <span class="">Charts & Tables</span> <i class="fa fa-angle-left pull-right"></i> </a>
                 <ul class="sidebar-nav-third-level collapse" id="12">
                     <li> <a href="javascript:void(0)">Menu 1</a> </li>
                     <li> <a href="javascript:void(0)">Menu 2</a> </li>
                     <li> <a href="javascript:void(0)">Menu 3</a> </li>
                 </ul>
         </li>
    </ul>
</li>    

javascript代码是

$(".sidebar-nav>li>a").click(function (e) {
    console.log(this, e.target, e.currentTarget);
    if ($(this).is(e.target)) {
        $('.sidebar-nav>li>a>i').toggleClass('fa-angle-left fa-angle-down', 200);
    }
});
$(".sidebar-nav>li>ul>li>a").on('click', function (e) {
   if ($(this).is(e.target)) {
       $('.sidebar-nav>li>ul>li>a>i').toggleClass('fa-angle-left fa-angle-down', 200);
   }
});

当我单击仪表板链接时，ui 元素的箭头正在改变方向 请帮忙。 谢谢

Answer 1

我认为您可能需要“每个”，如下所示:

$(".sidebar-nav>li>a").each(function(){
    $(".sidebar-nav>li>a").click(function (e) {
        if ($(this).is(e.target)) {
           $('.sidebar-nav>li>a>i').toggleClass('fa-angle-left fa-angle-down', 200);
  }
  });
});

其他代码同上；