Question

我使用slideToggle为隐藏的div设置动画。因为它在顶部有一个固定的位置，所以我想在它下面添加一个容器div的填充顶部的动画＆＃39;与隐藏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属性上设置它。你删除了它的类，但style属性并没有真正与那个变化相关联，因此仍然存在。

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

Answer 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;
    }
});

Answer 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

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

3 个答案: