Jquery removeClass, addClass

Question

我正在使用removeClass和addClass函数。我正在尝试在单击下拉列表打开时更改字体真棒类。我已经尝试过几次完成这项工作，但我认为我一定忽略了什么。

这是我的 html 代码：

<div id="cssmenu"class="col-xs-12 left">
    <ul class="nav nav-sidebar">
       <li><a href='#'><span>Dashboard</span></a></li>
       <li class='active has-sub'><a href='#'><span>Products</span><i class="fa fa-caret-right"></i>

这是我的Jquery代码，我正在尝试删除该类并添加另一个类：

$('#cssmenu ul li a i').on('click', function() {
    $('#cssmenu ul li a i').removeClass('fa-caret-right');
    $(this).addClass('fa-caret-down');
});

感谢您查看:)顺便说一句，我正在寻找线索而不是答案，因为我正在尝试学习 Jquery。

Answer 1

我会在列表项上添加单击事件：

$('#cssmenu ul li').on('click', function() {
        $('#cssmenu ul li a i').removeClass('fa-caret-right');
        $(this).find('i').addClass('fa-caret-down');
});

Answer 2

您正在元素上使用click <i> ，显然您没有单击。尝试在锚点<a>标记上使用click，并更改其中包含的<i>上的类。

Answer 3

$('#cssmenu ul li a').on('click', function() {
        $('#cssmenu ul li a i').removeClass('fa-caret-right');
        $(this).find('i').addClass('fa-caret-down');
});

Answer 4

试试这个

$('#cssmenu ul li a i').on('click', function() {
        $(this).addClass('fa-caret-down').siblings().removeClass('fa-caret-right');
});

Answer 5

至于你提到的线索，你可能想看看jQuery的toggleClass（）方法：http://api.jquery.com/toggleclass/

Answer 6

试试这个解决方案：

$('#cssmenu ul li.has-sub').on('click', function() {
  $(this).find('i').removeClass('fa-caret-right').addClass('fa-caret-down');
});