Jquery Slide/Toggle 有效但与下方 div 重叠

Question

我一直在尝试 jquery slide/toggle 函数，我可以使用下面的代码让它工作（当 '.Panel' Div 的内容堆叠时彼此叠加）。

Jquery

<script> 
$(document).ready(function(){
$(".Flip").click(function(){
$(".Panel").slideToggle("slow");
});
});
</script>

HTML

<div class="Flip">
  <p>Flip Heading</p>
</div>

<div class="Panel">

  <div class="Flipimages">
    <img src="#" alt="#" style="width:100%">
    <img src="#" alt="#" style="width:100%">
  </div>

  <div class="Fliptext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

</div>

CSS

.Flip {
width: 95%;
margin: 0 auto;
text-align: center;
background-color: rgb(183,57,118);
border: 2px solid rgb(183,57,118);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
margin-top: 40px;
}

.Panel {
width: 95%;
margin: 0 auto;
padding: 10px;
display: none;
font-family: arial;
border: 2px solid rgb(183,57,118);
border-top: none;
}

我在同一页上有 4 个这样的元素（都使用不同的名称，因此功能不同），当我尝试在 div '.Panel' 中浮动 div 元素时出现问题。

.Flipimages {
width: 50%;
float: left;
}

.Fliptext {
width: 45%;
float: left;
margin-left: 20px;
}

我正在尝试将它们向左浮动，以便图像和文本并排放置，而不是彼此重叠。 CSS 工作正常，但是当单击 'Flip' div 时，它不会将其下方的页面内容向下推。它覆盖ps 它看起来很乱。当我没有将上述元素浮动但想不出影响它的原因时，这很好用。

有人有什么想法吗？

ps - 希望我解释的没问题。

谢谢

克里斯

Answer 1

我认为问题在于您有未浮动的父元素和浮动的子元素，它搞砸了一切：

我已经获取了您的代码并对其进行了更新 here，但是，您必须提供 width:100% 才能使这些 div 居中，因为它们必须浮动（翻盖和面板 div）。

或者，您可以将所有 html 放入具有 width:95%; margin:0 auto; 的容器中，这样您仍然可以将宽度保持在 95% 并使所有内容居中。

here's一个例子

Jquery Slide/Toggle 有效但与下方 div 重叠

Jquery Slide/Toggle works but overlaps div below

jquery

slidetoggle