JQuery 添加/删除类 onClick

Posted 2023-02-25

【中文标题】JQuery 添加/删除类 onClick

【英文标题】：JQuery add/remove class onClick

【发布时间】：2015-04-01 12:57:43

【问题描述】：

点击时打开子菜单，下次点击时关闭——这就是我想要实现的。例如this page（“关注”链接下的子菜单）。 它打开子菜单（添加类“打开”），但不关闭。卡住了... :(

我的html：

<ul id="toggle"><li>
<a href="#">Menu</a>
<ul id="dropdown" class="dropdown-menu" role="menu">
<li><a href="#">2017</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2003</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>    

javascript：

$(document).ready(function()
$('#toggle li').on('click', function()
$(this).removeClass('open').addClass('open');
);
);

http://jsfiddle.net/Gallex/32pv6xz8/7/

【问题讨论】：

目前有7个回答，都建议toggleClass，还有人吗？

jQuery toggle class 的可能副本

@Vohuman 不是全部 ;-)，至少不仅是

【参考方案1】：

您可以为此使用函数toggleClass()：

$('#toggle li').on('click', function () 
    $(this).toggleClass('open')
);

Demo

这里有一个稍微不同的方法：

jQuery

$('#toggle li').on('click', function () 
     $(this).find('ul').slideToggle();
 );

CSS

#toggle li ul 
    list-style-type: none;
    left:0;
    position:absolute;
    display: none;

Demo 2

为了防止重定向，您必须使用.preventDefault():

 $('#toggle li:has(#dropdown)').on('click', function (event) 
    if ($(event.target).parents('#dropdown').length > 0) 
        event.stopPropagation();
     else 
        event.preventDefault();
    
    $(this).find('ul').slideToggle();
);

我不确定这是最干净还是最好的方法，但它确实有效。

如果您想保存 url 以供进一步使用（例如通过 window.location 重定向），您可以将 href 属性分配给变量：

var href = $(this).find('a').attr('href');

Demo 3

参考

.toggleClass()

.slideToggle()

【讨论】：

我非常喜欢这种“不同的方法”来解决我的问题。我会用它。

但是，我想“进一步发展”。在我手写的 html 代码中，锚标记没有 url，但通常它有：'... myhomepage.com/somecategory">Menu</a> ...' 所以，我的问题是：点击时，如果锚点有 url，如何“强制”打开子菜单不去那个 url？

@Gallex 如果其中一个答案对您有所帮助，请随时接受任何

有点仓促，还不够出色。现在所有的锚都没有重定向，但我只需要这个在子菜单中有子菜单的锚 [link]jsfiddle.net/Gallex/0akdz4ow 锚，也需要重定向

是的，子菜单锚点现在可以工作，但主菜单不能jsfiddle.net/Gallex/0akdz4ow/4

【参考方案2】：

请改用toggleClass。

$(document).ready(function()
  $('#toggle li').on('click', function()
  $(this).toggleClass('open');
);
);

【参考方案3】：

您正在寻找的是.toggleClass() 函数：

$(document).ready(function()
    $('#toggle li').on('click', function()
        $(this).toggleClass('open')('open');
    );
);

查看the corrected jsfiddle :)

你做错了，你链接了 add 和 remove 函数：

$(this).removeClass('open').addClass('open');

这将删除“open”类并（完成后）再次添加“open”类。这导致该类不会消失。

【参考方案4】：

$(document).ready(function()
  $('#toggle li').on('click', function()
     $(this).toggleClass('open');
  );
);

使用 toggleClass() 函数。

Demo

【参考方案5】：

在jquery中使用toggleClass()函数

$('#toggle li').on('click', function () 
    $(this).toggleClass('open')
);

Demo Here

【参考方案6】：

这是因为您要删除该类然后添加它...所以它总是会被添加

$(this).removeClass('open');

关闭它。

改用这个

$(document).ready(function()
$('#toggle li').on('click', function()
$(this).toggleClass('open');
);
);

【参考方案7】：

只需执行以下操作：

$(document).ready(function()
    $('#toggle li').on('click', function()
         $(this).toggleClass('open');
    );
);

jsfiddle