如何在内部更改（添加或删除）类 <ul> 单击孩子时的孩子

Question

我正在制作简单的应用程序，基本上我正在学习JavaScript，jQuery，HTMl等Web技术。因此，我创建了简单的仪表板，它看起来像这样：

如您所见，当我单击类别时，单击类别时指向下方的箭头应指向上方，而我看到的是关于此类的：

fa-angle-down

因此，基本上，当单击类别时，我应该删除一个类并添加一个名为的新类：

fa-angle-up

但是我不知道如何通过一次编写代码并将其应用于行为类似的页面上的所有元素来实现这一点，请提供任何帮助，并提供一些解释，为什么会这样。

这是我的HTML：

   <ul class="nav navbar-nav side-nav">
            <li>
                <a href="#" data-toggle="collapse" data-target="#submenu-1"><i class="far fa-clipboard"></i> <span class="menu-item-text">TEST</span><i class="fas fa-angle-down fa-fw pull-right"></i></a>
                <ul id="submenu-1" class="collapse">
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.1</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.2</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.3</a></li>
                </ul>
            </li>
            <li>
                <a href="#" data-toggle="collapse" data-target="#submenu-2"><i class="far fa-folder-open"></i> <span class="menu-item-text">TEST 2</span><i class="fas fa-angle-down fa-fw pull-right"></i></a>
                <ul id="submenu-2" class="collapse">
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.1</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.2</a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.3</a></li>
                </ul>
            </li>
            <li>
                <a href="investigaciones/favoritas"><i class="fas fa-shopping-cart"></i> <span class="menu-item-text">TEST 3</span></a>
            </li>
            <li>
                <a href="sugerencias"><i class="fas fa-cogs"></i> <span class="menu-item-text">TEST 4</span></a>
            </li>

        </ul>

</nav>

   <script>
        $('#submenu-1 > ul > li').on('click',function(event){alert('Does this trigger?');});
    </script>

如您所见，伙计们还有一点点JavaScript代码：

 <script>
        $('#submenu-1 > ul > li').on('click',function(event){alert('Does this trigger?');});
    </script>

可能会注意到我尝试将事件处理程序附加到属于ul的li ，该li位于ID为#submenu-1元素中

但是不幸的是，这不起作用:(

Answer 1

正如我在评论中提到的，我强烈建议阅读解耦HTML，CSS和JavaScript 。

首先使用一些js-*类标记更改您的html，然后使用一些简单的jquery。 您可以忽略样式，这些只是用于示例。

js-angles是仅单个元素可以向上的容器。 js-angle是包含1个或多个项目的元素，当单击它时（ js-angle ）需要从下到上更改。

 $(document).ready(() => { $('.js-angles .js-angle').on('click', // This is an arrow function so there is no "this" // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions // we can easily replace "this" with "e.currentTarget" // https://api.jquery.com/category/events/event-object/ (e) => { var $this = $(e.currentTarget); // $container "contains" everything we want to track/change var $container = $this.closest('.js-angles'); // find anything in the container that currently has up and toggle it with down $container.find('.fa-angle-up').toggleClass('fa-angle-up fa-angle-down'); // find the down within the element we clicked and toggle up/down $this.find('.fa-angle-down').toggleClass('fa-angle-up fa-angle-down'); }); }); 

 a { text-docoration: none } li { width: 120px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav navbar-nav side-nav js-angles"> <li> <a href="#" data-toggle="collapse" data-target="#submenu-1" class="js-angle"> <i class="far fa fa-clipboard"></i> <span class="menu-item-text">TEST</span> <i class="fas fa fa-angle-down fa-fw pull-right"></i> </a> <ul id="submenu-1" class="collapse"> <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.1</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.2</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.3</a></li> </ul> </li> <li> <a href="#" data-toggle="collapse" data-target="#submenu-2" class="js-angle"> <i class="far fa fa-folder-open"></i> <span class="menu-item-text">TEST 2</span> <i class="fas fa fa-angle-down fa-fw pull-right"></i> </a> <ul id="submenu-2" class="collapse"> <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.1</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.2</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.3</a></li> </ul> </li> </ul> 

Answer 2

使用.toggleClass（）。

<i id="arrow" class="fa fa-angle-down" style="margin-left:40px"></i>

<script>
  $('.navbar-nav li').click(function(){
    $("#arrow", this).toggleClass("fa-angle-down fa-angle-up");
  });
</script>

我附上了一个js小提琴https://jsfiddle.net/pouu7daw/ 。 希望能帮助到你