单击子程序时如何更改(添加或删除) <ul>子程序中的类
单击子程序时如何更改(添加或删除) <ul>子程序中的类
提问于 2018-01-24 19:28:52
我正在制作简单的应用程序，基本上我正在学习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代码是lil的：
<script>
$('#submenu-1 > ul > li').on('click',function(event){alert('Does this trigger?');});
</script>可以注意到，我已经尝试将和事件处理程序附加到li，它是ul的一部分，位于元素中，id为#submenu-1
但不幸的是，这是行不通的：
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-24 20:31:55
正如我在评论中提到的，我强烈建议您阅读将HTML、CSS和JavaScript解耦。
首先使用一些js-*类标记来更改html，然后是一些简单的jquery。您可以忽略这些样式，它们只是用于示例。
js-angles是一个容器，其中只有一个元素可以打开。js-angle是包含一个或多个项目的元素，当单击它(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>
Stack Overflow用户
发布于 2018-01-24 20:00:42
使用.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/。希望它能帮上忙
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48430223
复制相关文章
相似问题
腾讯云开发者
