gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 08:00:48 25 4
gpt4 key购买 nike

我正在制作一个多级折叠侧菜单,我使用 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 元素的箭头正在改变方向请帮忙。谢谢

最佳答案

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

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

其他代码同上;

关于javascript - 多级折叠侧边栏箭头方向改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34585153/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com