Question

我的网站上有一个很大的叠加层 - 由popify.js支持，叠加层使用点击功能绑定'display:block;'（这是我的理解）默认元素display: none;本质上是一个简单的显示/隐藏。但！下面的内容是重叠的。这是一个较长的垂直页面，我试图添加一个条件来推动重叠的元素，在叠加层下方（margin-top: 300px;）

但是如果

.sDetails2

不再显示：block;删除margin-top: 300px;

下面的元素：

.verticallparallaxwrapper section.content-guide { 
        margin-top: 300px; // add if .sDetails2 is display: block
}

Answer 1

听起来你可以使用jQuery的.slideToggle（）来实现这一目标。或许像this jsfiddle这样的东西？

JS

$('#whatevertriggerspopup').on('click', function() {
    $('#thepopup').slideToggle();
});

修改

为保证金修正：

CSS

.toggle-margin { margin-top: 300px; }

JS

$('#whatevertriggerspopup').on('click', function() { $('#thepopup').slideToggle(); $('#thethingbelowthepopup').toggleClass('.toggle-margin'); });

Answer 2

没有jQuery，遗憾的是这个简单的解决方案只有在实际的内联样式属性被设置的情况下才有效：

var myOverlay = document.getElementsByClassName('sDetals2')[0];
var movingElement = document.getElementsByClassName('content-guide')[0];
var displayCheck = myOverlay.style.display;

if(displayCheck == 'block'){
   movingElement.style.margin = '300px 0 0 0';
}
else{
   movingElement.style.margin = '0';
}

如果通过类名和相关CSS规则设置显示，则无效。

{{1}}

如果存在叠加（元素是显示：块），则将元素推到下面

2 个答案: