Question

我有一个点击功能隐藏并显示div。

当点击div时我希望身体有overflow: hidden; - 这有效，但当我关闭div时，＆＃34; body＆＃34;仍有overflow: hidden;，但我希望它为overflow: scroll;

你能帮助我吗？

我已阅读this post但未设法解决此问题。

这是我的jQuery：

$(document).ready(function() {
    $(".headeropen").hide();
    $(".headerclosed").show();

    $('.headerclosed').click(function() {
        $(".headeropen").slideToggle();
        $('body').css('overflow', 'hidden');
    });
});

Answer 1

您可以使用回调功能。 400是slideToggle的默认速度，swing是宽松的默认值：

$(document).ready(function() {
    $(".headeropen").hide();
    $(".headerclosed").show();

    $('.headerclosed').click(function() {
       $(".headeropen").slideToggle(400, 'swing', function(){
            if($('body').css('overflow') == 'scroll' || $('body').css('overflow') == 'auto'){
                $('body').css('overflow','hidden');
            }else{
                $('body').css('overflow','scroll');
            }
        });
    });
});

Answer 2

可能有点矫枉过正，但我写了这个小提琴：http://jsfiddle.net/lharby/qjmnakkc/

JS：

$('.headerclosed').click(function(){
    $(".headeropen").slideToggle();
    $('body').toggleClass('hiddenOverflow');
});

CSS：

body {
    overflow:scroll;
}

.hiddenOverflow {
    overflow:hidden;
}

在调用div时将body设置为隐藏溢出

2 个答案: