jQuery，删除添加到 toggleClass 元素的填充答案

【问题标题】：jQuery, remove padding added to toggleClass elementjQuery，删除添加到 toggleClass 元素的填充
【发布时间】：2015-06-08 14:13:39
【问题描述】：

我正在使用 slideToggle 为隐藏的 div 设置动画。因为它在顶部有一个固定位置，所以我想使用隐藏 div 的当前高度添加该容器 div 的填充顶部的动画。

然而，类在点击时会正确切换，并且填充添加了正确数量的像素，在切换掉类后填充仍然存在。

当我在切换的类上应用填充时，即使该类在第二次单击时被删除（切换它），它仍然存在，怎么会？

js:

$('#myButton').click(function(e){
    e.preventDefault();

    $('#myDiv').slideToggle( function(){

        var myDivHeight = $(this).outerHeight();

        $('.containerDiv').toggleClass('myDivOpened');

        $('.myDivOpened').css('padding-top', myDivHeight + 15);

    });


});

非常感谢。

【问题讨论】：

您将样式添加到元素而不是类。为什么不直接将填充添加到切换类？
因为padding和class没有关系......
好的，实际上样式被添加到元素而不是类是有意义的。但是我将如何在切换类上添加填充，这不是我在做什么。 $('.myDivOpened').css('padding-top', myDivHeight + 15);如果会有toggleCss之类的东西会用hasClass试试。谢谢大家
所以添加逻辑以在删除类时删除填充。
我真的很难理解为什么您不将填充添加到 CSS 类并打开和关闭该类。另外，每次你点击 #myButton 时，它都会在 DOM 中搜索所有具有 myDivOpened 和 containerDiv 类的元素，这可能不是很有效。

标签： javascript jquery html

【解决方案1】：

您的方法的作用是在元素的样式属性中添加一个 padding-top。无论如何，它不会改变类。

在类中添加样式会更好，但如果您真的想用 jquery 切换样式，这就是它的工作原理。

$('.containerDiv').toggle(function () {
    $(".containerDiv").css({paddingTop: "20px"});
}, function () {
    $(".containerDiv").css({paddingTop: "0px"});
});

编辑：我可以看到您的逻辑问题，并会尝试详细说明.. 首先，我们有一个名为 containerDiv 的 div，它没有类也没有填充。然后我们将它的类设置为 myDivOpened 并给这个类的所有元素一个 paddingtop。现在你要做的是再次删除元素 containerDiv 的类并期望它删除填充。

为什么它不删除填充？因为你是在 containerDiv 的 style 属性上设置的。您删除了它的类，但 style 属性并没有真正与该更改相关联，因此仍然存在。

一个适当的解决方案是有两个类，一个有填充，一个没有，并在这两者之间切换。

【讨论】：

不确定如何将样式添加到类中而不是元素中。我想我是通过在 js 中将它应用到那个特定的类来做到这一点的。考虑到高度是可变的，这就是为什么使用 var
首先，将类设置为样式 (.myDivOpened) 之外的另一个元素 (.containerDiv)。其次， .css() 添加样式并且不会更改其设置类的任何内容。
使用您的方法，它确实切换了完整的 div，不是吗？ jsfiddle.net/asturias/cLLLyrqp
这是您的 slideToggle() 的效果。您可以将两个元素都设置为向左浮动，将它们混入/混出，而不用担心 paddingTop。

【解决方案2】：

@Lain：感谢您进一步澄清。你是对的，一旦插入，切换就会使填充保持不变。

您可以尝试手动添加和删除课程。
此链接可能会有所帮助：api.jquery.com/toggleclass。

在删除类之前，手动从类中删除填充，然后从正文中删除类。

只需粘贴一些可能有帮助的代码：

$(this).click(function(e)
{
    if (!added)
    {
        $("body").addClass("myDivOpened");
        $('.myDivOpened').css('padding-top',15);
        added = true;
    } else {
        $('.myDivOpened').css('padding-top',0);
        $("body").removeClass("myDivOpened");
        added = false;
    }
});

【讨论】：

您的代码究竟在哪里再次删除了 paddingTop？
无需单独删除填充。填充已作为类的属性链接。当您切换类时，与该类关联的所有属性也应该消失。
您是通过什么方式将 paddingTop 属性链接到类的？
如何将属性添加到尚未添加的类中？
@ET：在控制台中连续记录这些行几次，看看你的填充会发生什么 - $('.myDivOpened').css('padding-top', 15); $('body').toggleClass('myDivOpened'); $('body').css('padding-top');

【解决方案3】：

我想我可能已经找到了一种方法，因为通往罗马的方法有很多，我猜这个方法和其他方法一样有效（或者至少希望它是有效的）。

$('#myButton').click(function(e){
    e.preventDefault();

     var $myDiv = $('#myDiv');
     var $containerDiv = $('.containerDiv');
     var myDivHeight = $myDiv.outerHeight();

     $myDiv.toggleClass('opened');     

    $myDiv.slideToggle( function(){

        if($myDiv.hasClass('opened')){
            $containerDiv.css('padding-top', myDivHeight);
        }else{
            $containerDiv.css('padding-top', 0);
        }

    });

});

更新fiddle

【讨论】：