jQuery - 切换和删除类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5585387/
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 - toggle & removeClass
提问by Wordpressor
An easy one, but I can't figure it out. I have a link called #title and when you click it it toggles div called #content. This works perfectly, but in addition I'm adding "active" class to my #title link and I can't get rid of it, even with removeClass.
一个简单的，但我无法弄清楚。我有一个名为 #title 的链接，当您单击它时，它会切换名为 #content 的 div。这完美地工作，但此外，我将“活动”类添加到我的#title 链接，我无法摆脱它，即使使用 removeClass。
See code above and example link (the title should be red ONLY when the #content is expanded, not all the time).
请参阅上面的代码和示例链接（仅当 #content 展开时标题应该是红色的，而不是一直）。
$('#title').click(function() {
$(this).addClass('active');
$('#content').toggle();
}), function() {
$(this).removeClass('active');
};
回答by Gazler
You can use the toggleClass function along with toggle.
您可以将 toggleClass 函数与 toggle 一起使用。
$('#title').click(function() {
$(this).toggleClass('active');
$('#content').toggle();
});
Or you can use a more robust version which will ensure that the class is added if the content is visible and removed otherwise.
或者您可以使用更强大的版本，这将确保在内容可见时添加类，否则将被删除。
$('#title').click(function() {
$('#content').toggle();
if ($('#content:visible').size() != 0)
{
$(this).addClass('active');
}
else
{
$(this).removeClass('active');
}
});
回答by justkt
$('#title').click(function() {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
$('#content').toggle();
});
Check for the presence of 'active' using hasClassand remove it if it is there. Add it if it is not.
使用检查是否存在“活动” hasClass，如果存在则将其删除。如果不是，请添加它。
Or you could use toggleClassto hide all that logic.
或者你可以toggleClass用来隐藏所有这些逻辑。
回答by kapa
A compact and still readable (I guess) solution:
一个紧凑且仍然可读（我猜）的解决方案：
$('#title').click(function() {
var isContentVisible=$('#content').toggle().is(':visible');
$(this).toggleClass('active', isContentVisible);
});
It toggles #contentand checks whether it is visible or not afterwards. Then it toggles the class on #titlebased on the result. Could be a one-liner function also, but it would not satisfy my readability expectations then.
之后它会切换#content并检查它是否可见。然后它#title根据结果切换类。也可能是一个单行函数，但它不会满足我对可读性的期望。
回答by Smarty Siv
one more Solution for hide current value with other value
用其他值隐藏当前值的另一种解决方案
$('.my').click(function() {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
$('.my').toggle();
});
});
Click here! This works with reference linksas well.
回答by Vladimir Todorov
I think that this is the most appropriate way to do it.
我认为这是最合适的方法。
$(this).toggleClass('active').siblings().removeClass('active');
$(this).toggleClass('active').siblings().removeClass('active');
