Question

我一直在尝试使用jquery幻灯片/切换功能，我可以使用下面的代码（当＆＃39; .Panel＆＃39; 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元素浮动到div中时出现问题＆＃39; .Panel＆＃39;。

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

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

我试图将它们漂浮在左边，这样图像和文字就会彼此并排放置而不是彼此叠加。 CSS工作正常，但点击＆＃39; Flip＆＃39; div，它不会将页面内容推到它下面。它重叠，看起来非常凌乱。当我不将上面的元素浮动但却无法想出为什么会影响它时，这种方法很好。

有人有什么想法吗？

ps - 我希望我解释好了。

由于

克里斯

Answer 1

我认为问题在于你有没有浮动的父元素和子元素，它们搞砸了所有东西：

我已经使用了您的代码并对其进行了更新here，但是，您必须让width:100%将这些div放在中心位置，因为它们必须浮动（翻转和面板div）。

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

here's一个例子

Jquery Slide / Toggle工作但下面重叠div

1 个答案: