javascript - jQuery，删除添加到toggleClass元素的填充

Question

我正在使用 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);

    });


});

非常感谢。

Answer 1

你的方法的作用是在元素的 style 属性最后添加一个 padding-top 。无论如何，它不会改变类。

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

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

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

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

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