文章/答案/技术大牛

发布

问阀体溢出隐藏单击
EN

Stack Overflow用户

提问于 2016-10-14 17:22:56

回答 1查看 97关注 0票数 0

我的Html

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

</body>

通过单击div #clickMe上面的div #topContent与jQuery，它添加了一个溢出，因此我向主体添加了一个类，并使用toggleClass()隐藏溢出。

.hiddenOverflow { overflow:hidden }

JavaScript：

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

问题是当我第一次单击时，它完全是slideDown，但是当我再次单击到slideUp时，溢出会添加到正文中，直到#topContent被隐藏，而当#topContent完全消失时，溢出消失。

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

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-14 17:25:26

为什么不在CSS中声明溢出-x是隐藏的：

body {
    overflow-x: hidden;
}

在大多数情况下，您从不希望水平内容在正文中溢出。如果这不适合您的需要，可以将回调函数传递给slideToggle函数，该函数将在动画完成后执行：

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40048777

复制

相似问题

问阀体溢出隐藏单击
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阀体溢出隐藏单击EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阀体溢出隐藏单击
EN