gpt4 book ai didi

javascript - jquery 在 2 个多个类之间切换

转载 作者:太空宇宙 更新时间:2023-11-04 15:57:44 25 4
gpt4 key购买 nike

我正在尝试在 jquery 中的 2 个多个类之间切换。我希望它在单击时从自己的图标更改为字体超棒的图标。它仅适用于要更改的一个类,但是当我希望它更改多个类时,我无法让它工作。

jQuery(document).ready(function () {
var $menu = 'icon '+'icon-menu';
var $close = 'fa '+'fa-close';

$('.icon-toggle-menu').click(function (evt) {
$('.nav-screen').fadeToggle();
$($menu, $close).toggleClass($menu +' '+ $close);
$('.nav-logo-black').fadeToggle();
$('.nav-icons').toggleClass('nav-fixed');
$('.nav').toggleClass('nav-padding');
})
});
<nav class="nav">
<a class="nav-logo-black" href="index.html">
<img src="assets/img/logo/forcitx2.png" alt="forcit-logo-banner">
</a>
<ul class="pull-right nav-icons">
<li><a class="icon-chat" href="#"><span class="icon icon-message"></span></a></li>
<li><a class="icon-toggle-menu" href="#"><span class="icon icon-menu"></span></a></li>
</ul>
</nav>

最佳答案

好的,我将尝试修复您的代码。尽管还不完全清楚您的目标是什么:

$(function() {
$('.icon-toggle-menu').click(function(evt) {
//$('.nav-screen').fadeToggle(); Missing in HTML
$('.icon.icon-menu, .fa.fa-close').toggleClass('icon icon-menu fa fa-close');
$('.nav-logo-black').fadeToggle();
$('.nav-icons').toggleClass('nav-fixed');
$('.nav').toggleClass('nav-padding');
})
});
.icon {
font-weight: bold;
}

.fa.fa-close {
color: red;
}

.icon.icon-menu {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<a class="nav-logo-black" href="index.html">
Logo
</a>
<ul class="pull-right nav-icons">
<li><a class="icon-chat" href="#"><span class="icon icon-message">Icon chat</span></a></li>
<li><a class="icon-toggle-menu" href="#"><span class="icon icon-menu">Icon toggle menu (click me)</span></a></li>
</ul>
</nav>

关于javascript - jquery 在 2 个多个类之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44327170/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com