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

multi level collapse sidebar arrow direction changing

本文关键字：方向 改变 折叠 侧边栏 多级      更新时间：2023-09-26

我正在制作一个多级折叠侧菜单，我正在使用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);
   }
});

当我点击Dashboard链接时，ui元素的箭头正在改变方向请帮忙。感谢

我认为您可能需要"each"，如下所示：

$(".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);
  }
  });
});

其他代码相同；

相关文章：