Question

我的Html

<html>
...
<body>
 <div id="topContent">...</div>
 <div id="clickMe">Show TopContent</div>
...

</body>

通过单击div #clickMe上面的div #topContent向下滑动jQuery，它添加了一个溢出，所以我在body中添加了一个类，并使用toggleClass（）来隐藏溢出

.hiddenOverflow { overflow:hidden }

JavaScript的：

  $("#clickMe").click(function(){
    $("#topContent").slideToggle('slow');
    $('html,body').toggleClass('hiddenOverflow');
  });

问题是当我第一次点击时，它完全滑动了，但当我再次点击slideUp时，会向主体添加溢出，直到#topContent被隐藏，当#topContent完全消失时溢出消失。

如何防止不在slideUp上显示溢出？

Answer 1

为什么不在你的CSS中，只是声明overflow-x被隐藏：

body {
    overflow-x: hidden;
}

在大多数情况下，您永远不希望水平内容在身体中溢出。如果这不符合您的需要，您可以将回调函数传递给动画完成时将执行的slideToggle函数：

$("#clickMe").click(function(){
    $("#topContent").slideToggle('slow', function() {
        $('html,body').toggleClass('hiddenOverflow');
    });
});

但是，这只会扭转您的问题。如果然后将其滑动打开，则在打开之前不会添加该类，这很可能会导致相同的问题。为防止出现这种情况，您必须跟踪#topContent div（已打开或已关闭）的状态，并使用slideUp和slideDown功能。 slideUp将使用回调函数来删除类，其中slideDown不会接受函数，而是立即切换类。

点击时身体溢出隐藏

1 个答案: