Question

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

基本结构是：

 <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是图像滑块。那时身体主要是身体。

我创建了这个功能，如果我点击切换按钮，它切换图像滑块以打开和关闭。（如果你点击我网站左侧的cog按钮，你可以看到切换开关）

我最初想要做的是当我点击切换按钮时，它应该完全隐藏图像滑块并向上推动内容，以便.body main取代滑块的位置。

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

我认为这是因为图像滑块和.body主要首先相互重叠。

无论如何，我可以在文档中进行滑块，以便图像滑块实际推动＆＃39; .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);

});});

感谢。

Answer 1

尝试使用此css ...

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

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

希望这有帮助。

如何在下面创建图层PUSH图层？

1 个答案: