Question

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

正如你可以看到的那样，当我点击一个类别时，指向下方的箭头应该在点击类别时指向，并且我看到了关于这个类的信息：

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>

我可以注意到我已经尝试将li作为ul的一部分附加到事件处理程序，该#submenu-1位于ID为{{1}的元素中}}

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

Answer 1

正如我在评论中提到的，我强烈建议您阅读Decoupling Your HTML, CSS, and JavaScript。

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

js-angles是只有一个元素 up 的容器。 js-angle是包含一个或多个项目的元素，这些项目在点击（js-angle）时需要从下到上更改。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用.toggleClass（）。

right: calc(50% - 250px);

我附上了一个js小提琴https://jsfiddle.net/pouu7daw/。希望它有所帮助

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

2 个答案: