繁体   English   中英

我如何在下面压入一层?

[英]How do i make a layer PUSH layers below?

我在建立网站时遇到了这个结构性问题,我想我在这里需要一点帮助。

基本结构是这样的:

 <html>
<head>
<body>
<p class="skip">
<div class="container fixed_header ">
<div class="fluid_container">
<div class="body main">

</body>
</html>

如果您需要我的网站的确切结构,则可以查看我的网站以获取更多信息: http : //xestudio.xco.kr/ (如果扩展名广告块阻止您进入,则可以免受恶意软件的侵害)

现在,容器是主导航div,fluid_container是图像滑块。 那么身体主体当然就是身体。

我创建了此功能,如果我单击切换按钮,它将切换图像滑块以打开和关闭。 (如果单击我网站左侧的齿轮按钮,则可以看到切换开关)

我最初试图从中做出的是,当我单击切换按钮时,它应该完全隐藏图像滑块并将内容向上推,以便.body主组件代替滑块所在的位置。

但是正如您所看到的,我所看到的只是图像滑块下方的空白区域。

我认为这是因为图像滑块和.body主要是彼此重叠的。

无论如何,我可以使滑块发生在文档中,以便图像滑块实际上“推动”下面的.body主文件吗?

菜单栏(.container)也一样

这是CSS代码。

.fluid_container {
margin: 0 auto;
width: 100%;
height: 400px;
transition: all 200ms ease-in-out;
}

.fluid_container.hide {
height: 0;
}


.body{background-color: #fff;
 position:relative;
padding:30px 0}

拨动开关功能-

 <div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round"     type="checkbox" checked>
  <label for="cmn-toggle-1"></label>
</div>


  <script>
    jQuery(document).ready(function(){
jQuery('.cmn-toggle').on('click',function(){
jQuery('.fluid_container').toggleClass('hide',200);

});});

谢谢。

尝试使用此CSS ...

.fluid_container {
margin: 0 auto;
width: 100%;
height: 400px;
transition: all 200ms ease-in-out;
}

.hide {
display: none;
height: 0;
}

希望这可以帮助。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM