JQuery 添加/删除类 onClick答案

【问题标题】：JQuery add/remove class onClickJQuery 添加/删除类 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 不是全部 ;-)，至少不仅是

标签： jquery

【解决方案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>

@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

【讨论】：