gpt4 book ai didi

javascript - 使用 Jquery 删除不同项目上的类

转载 作者:行者123 更新时间:2023-11-28 06:08:52 25 4
gpt4 key购买 nike

我有一个带有动画的移动菜单按钮,单击菜单时类会发生变化,再次单击时单击会恢复正常。单击时还会弹出一个菜单。

当我单击弹出菜单 anchor 链接之一时,我希望动画结束状态也能单击回到正常状态。

这是我的 HTML 代码:

<div class="o-grid__item">
<button id="menu" class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
</div>enter code here

<nav class="main-menu">
<ul>

<li>
<a href="#welcome">
<i class="fa"></i>
<span class="nav-text">Home</span>
</a>
</li>

<li>
<a href="#portfolio">
<i class="fa"></i>
<span class="nav-text">Work</span>
</a>
</li>

<li>
<a href="#about">
<i class="fa"></i>
<span class="nav-text">About</span>
</a>
</li>

<li>
<a href="#contact">
<i class="fa"></i>
<span class="nav-text">Contact</span>
</a>
</li>
</ul>
</nav>

这是我用来切换菜单的脚本

$(document).ready(function(){
$(".c-hamburger").click(function(){
$(".main-menu").toggleClass("expand-menu");
});
});

这是用于为按钮设置动画的删除/添加类的代码。

(function() {

"use strict";

var toggles = document.querySelectorAll(".c-hamburger");

for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};

function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}



})();

我需要知道如何在单击列表中的列表项之一时为菜单按钮添加删除此类?非常感谢任何帮助。

最佳答案

要从元素中删除类而不只是切换它,请使用 JQuery 元素选择器的 .removeClass 扩展名。将其添加到 anchor 链接

关于javascript - 使用 Jquery 删除不同项目上的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36596508/

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