我正在开发一个 ASP.NET MVC 应用程序,完全由我自己制作,边做边学。我正在制作一个侧边栏菜单,但我一直在尝试制作一个动画向上/向下箭头。目前,我能得到的最好结果是 both/none 箭头打开 hidden.bs.collapse/shown.bs.collapse。我一直在看这里的一些帖子,但我无法让它按我想要的方式工作。我试过玩类似 $('.glyphicon[aria-expanded="true"]')
但不会改变行为。
预期:点击时,“collapse”被删除,箭头倒转。
实际:点击时,“collapse”被删除,但两个/一个箭头都反转。
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<div id="wrapperMenu" class="sidebar-nav">
<a href="#detailsSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu">Menu #1<i class="glyphicon glyphicon-arrow-down"></i></a>
<div class="collapse" id="detailsSubMenu">
<a href="#" class="list-group-item">A1</a>
<a href="#" class="list-group-item">A2</a>
<a href="#" class="list-group-item">A3</a>
</div>
<a href="#editSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu">Menu #2<i class="glyphicon glyphicon-arrow-down"></i></a>
<div class="collapse" id="editSubMenu">
<a href="#" class="list-group-item">B1</a>
<a href="#" class="list-group-item">B2</a>
</div>
</div>
</div>
Js:
$('#wrapperMenu').on('shown.bs.collapse', function() {
$(".glyphicon").removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up");
});
$('#wrapperMenu').on('hidden.bs.collapse', function() {
$(".glyphicon").removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down");
});
最佳答案
简单地定位当前元素子元素,您将找到 .glyphicon
并在其上使用 JQuery toggleClass()
表单示例
$('[data-toggle="collapse"]').click(function(){
$(this).children(".glyphicon").toggleClass("glyphicon-arrow-down glyphicon-arrow-up")
});
关于javascript - 获取在 hidden/shown.bs.collapse 上折叠的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36482863/