1

Hi am currently using the code below for an expandable footer on my site.

I would like to adapt it so that when the link class '.toggle' is clicked it will add a class called '.is-open' to the element so far the code does this but then additionally I would like the code to add the class '.is-open' to another class called '.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);

});

Thanks in advance :)

4

3 回答 3

0

你应该能够添加

$('.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);
于 2013-07-12T18:36:16.567 回答
0

我想要将类“.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循环，因为您只处理一个元素。

于 2013-07-12T18:09:27.620 回答
0

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

$(".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 有更多的了解，我可能会考虑早点尝试。但是谢谢你的帮助！

于 2013-07-12T21:23:27.363 回答