Question

在我的菜单上，我有一个字体真棒图标，我希望能够在点击父链接后更改。

如果关闭菜单链接，我试图获取它

如果菜单链接已打开则会显示

目前我的java脚本无法正常工作。

如果手动更改它但尝试让java脚本执行此操作，我只能更改它。

<?php echo Modules::run('admin/common/header/index');?>
<div id="wrapper">
<nav class="navbar navbar-inverse" role="navigation">

</nav>

<div class="menu">
    <ul class="nav navbar-nav menu">
        <li>
            <a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> System <span class="pull-right"><i class="fa fa-angle-right"></i></span></a>
            <ul id="setting" class="collapse">
                <li class="third-level">
                    <a data-toggle="collapse" data-target="#user"><i class="fa fa-angle-double-right"></i> First Level</a>
                    <ul id="user" class="collapse">
                        <li>
                            <a href="#"><i class="fa fa-angle-double-right"></i> Second Level</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>



<div id="page-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <h1><i class="fa fa-tachometer"></i> Dashboard <small>Dashboard Home</small></h1>
                <div class="alert alert-success alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                </div>
            </div>
        </div>
    </div>
</div>


</div>

<script type="text/javascript">
$('.parent').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa fa-angle-down');
});
</script>
<?php echo Modules::run('admin/common/footer/index');?>

Answer 1

这里的错误是你的jquery语法

$('.parent').on('shown.bs.collapse', function() {});

正确的语法类似于$('.parent <sub classes>').on('click', function() {});

Answer 2

您需要将侦听器附加到实际折叠的对象：

$('#setting').on('shown.bs.collapse', function() {
  $(".parent").addClass('fa fa-angle-right').removeClass('fa-angle-down');
});

#setting是要折叠的元素，因此事件发生在那里。

更改菜单链接上的图标单击

2 个答案: