jQuery添加类onclick答案

【问题标题】：jQuery add class onclickjQuery添加类onclick
【发布时间】：2013-07-11 08:57:54
【问题描述】：

您好，我目前在我的网站上使用下面的代码作为可展开的页脚。

我想对其进行调整，以便在单击链接类“.toggle”时，它将向元素添加一个名为“.is-open”的类，到目前为止，代码会执行此操作，但另外我想要代码将“.is-open”类添加到另一个名为“.footercontrol”的类中

$(".footer, .toggle:not(:first-child)").hide();

$(".toggle").click(function(e) {

e.preventDefault();

if ( $(this).hasClass("is-open") ){
    $(this).removeClass("is-open").nextAll(".footer, .toggle:not(:first-         child)").slideUp(500).removeClass("is-open");
    return;
}


$(this).toggleClass("is-open");
$(this).next(".footer").slideToggle(500).next(".toggle").slideToggle(500);

$("html, body").animate({
    scrollTop: $(document).height()
}, 500);

});

提前致谢:)

【问题讨论】：

标签： jquery class onclick footer

【解决方案1】：

你应该可以添加

$('.footercontrol').toggleClass('is-open');

在该功能内并使其按预期工作。

例如

$(this).toggleClass("is-open");
$('.footercontrol').toggleClass('is-open');
$(this).next(".footer").slideToggle(500).next(".toggle").slideToggle(500);

$("html, body").animate({
    scrollTop: $(document).height()
}, 500);

【讨论】：

【解决方案2】：

我想要将“.is-open”类添加到另一个类的代码称为'.footercontrol'

所以你想要这个：

$(".footercontrol").addClass("is-open");

如果我理解正确？

如果你只有一个元素有这个类，那么你应该考虑使用 id 而不是 class。但实际上没有任何变化。

编辑：

如果您还希望在第二次单击时将其删除，toggleClass 似乎正在这样做，尽管我从未使用过它。我通常这样做：

$( ".footercontrol" ).each(function( index ) {
 if($(this).hasClass("is-open"))
 {
  $(this).removeClass("is-open");
 }
 else
 {
  $(this).addClass("is-open");
 }
});

当然，您可以将 $(this) 替换为 $(".footercontrol") 并使其成为一次调用，而不是 .each 循环，因为您只处理一个元素。

【讨论】：

抱歉，我的意思是“is-open”类只需单击一下即可同时切换“.toggle”和“.footercontrol”。您给我的代码在添加类时非常有效，但我希望在第二次单击时再次将其删除。抱歉没说清楚！

【解决方案3】：

感谢您的帮助，我最终自己对它进行了排序，我只是修改了现有代码并在现有事件中添加了另一个类，如下所示：

$(".footer, .toggle:not(:first-child)").hide();

$(".toggle, .footercontrol").click(function(e) {

e.preventDefault();

if ( $(this).hasClass("is-open") ){
    $(this).removeClass("is-open").nextAll(".footer, .toggle:not(:first-child),   .footercontrol").slideUp(500).removeClass("is-open");
    return;
}

$(this).toggleClass("is-open");
$(this).next(".footer").slideToggle(500).next(".toggle").slideToggle(500);

$("html, body").animate({
    scrollTop: $(document).height()
}, 500);


});

而且它似乎工作得很好，如果我对 jQuery 有更多了解，我可能会考虑早点尝试。不过谢谢你的帮助！

【讨论】：