JQuery 添加/删除类 onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29391465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery add/remove class onClick
提问by Gallex
Open submenu on click, close on next click - that's what i would like to achive. example is this page(submenu under 'follow' link).
it opens submenu (adds class 'open'), but not closing. stucked... :(
点击打开子菜单，下次点击关闭 - 这就是我想要实现的。示例是此页面（“关注”链接下的子菜单）。
它打开子菜单（添加类“打开”），但不会关闭。卡住了... :(
my html:
我的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:
javascript:
$(document).ready(function(){
$('#toggle li').on('click', function(){
$(this).removeClass('open').addClass('open');
});
});
回答by empiric
You can use the function toggleClass()for this:
您可以toggleClass()为此使用该功能：
$('#toggle li').on('click', function () {
$(this).toggleClass('open')
});
Here is a slightly different approach:
这是一种稍微不同的方法：
jQuery
jQuery
$('#toggle li').on('click', function () {
$(this).find('ul').slideToggle();
});
CSS
CSS
#toggle li ul {
list-style-type: none;
left:0;
position:absolute;
display: none;
}
For preventing the redirect you have to use .preventDefault():
为了防止重定向，您必须使用.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();
});
I`m not sure if this is the cleanest or best approach, but it is working.
我不确定这是最干净还是最好的方法，但它正在起作用。
If you want to save the url for further use (e.g. redirectuing via window.location) you can assign the href-attribute to a variable:
如果您想保存 url 以供进一步使用（例如通过重定向window.location），您可以将 href 属性分配给一个变量：
var href = $(this).find('a').attr('href');
Reference
参考
回答by Pramod Karandikar
Use toggleClassinstead.
使用toggleClass来代替。
$(document).ready(function(){
$('#toggle li').on('click', function(){
$(this).toggleClass('open');
});
});
回答by Marc
What you are looking for is the .toggleClass()function:
您正在寻找的是.toggleClass()函数：
$(document).ready(function(){
$('#toggle li').on('click', function(){
$(this).toggleClass('open')('open');
});
});
Check out the corrected jsfiddle:)
查看更正后的 jsfiddle:)
What you did wrong was, that you chained the add and remove functions:
你做错了什么，你链接了添加和删除功能：
$(this).removeClass('open').addClass('open');
What this will do is removing the class 'open' and (when this is finsihed) add the class 'open' again. This caused, that the class would not dissapear.
这将做的是删除类 'open' 并（当它完成时）再次添加类 'open'。这导致，该类不会消失。
回答by I'm Geeker
Use toggleClass()function in jquery
在 jquery 中使用toggleClass()函数
$('#toggle li').on('click', function () {
$(this).toggleClass('open')
});
回答by tech-gayan
回答by enb081
回答by Ben P
it's because you are removing the class then adding it...so it will ALWAYS be added
这是因为您要删除该类然后添加它......所以它总是会被添加
$(this).removeClass('open');
to close it .
关闭它。
Use this instead
改用这个
$(document).ready(function(){
$('#toggle li').on('click', function(){
$(this).toggleClass('open');
});
});
