Question

我有三个div：Placard 1，Palcard 2和Placard 3，当单击它们时使用jQuery slideToggle来显示存储在div＃panel1，＃panel2，＃panel3中的隐藏数据。所有这些都可以完美地发挥作用：

未显示隐藏数据时，帖之间的距离保持在15像素之间，或者单击一个时，隐藏数据的底部与下一个帖之间保持15px的距离
显示隐藏数据时，其下方的标语牌向下移动以腾出空间。

我的问题是：如何使单击标语牌时动画向下的隐藏数据在单击的标语牌后面（距顶部15像素）开始和结束？ >

这是我的代码：

$(document).ready(function(){
  $("#placard1").click(function(){
    $("#panel1").slideToggle("slow");
  });
  
  $("#placard2").click(function(){
    $("#panel2").slideToggle("slow");
  });
  
  $("#placard3").click(function(){
    $("#panel3").slideToggle("slow");
  });
});

#box1, #box2, #box3 {
/*   position: relative; */
/*   border: solid 1px coral; */
  margin: 10px;
  width: 410px;
}

#placard1, #placard2, #placard3 {
  padding: 15px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  border-radius: 8px;
  min-height: 40px;
  width: 350px;
  margin: 15px;
  z-index: 1;
/*   position: absolute;   */
/*   position: sticky; */
}

#panel1, #panel2, #panel3  {
/*   margin-top: -70px; */
  padding: 50px;
  display: none;
  background-color: #eee;
/*   position: absolute; */
/*   position: fixed; */
/*   position: relative; */
/*   position: sticky; */
  border-radius: 8px;
  border: 1px solid #ddd;
  z-index: -2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box1">
  <div id="placard1">Placard 1 - click for more details</div>
  <div id="panel1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</div>
</div>

<div id="box2">
  <div id="placard2">Placard 2 - click for more details</div>
  <div id="panel2">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.</div>
</div>

<div id="box3">  
  <div id="placard3">Placard 3 - click for more details</div>
  <div id="panel3">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
</div>

我尝试使用margin-top：-70px，但这最终使上下隐藏的内容动画化。我也尝试过使用相对位置，绝对位置等位置的组合。但是无法弄清楚我需要什么。

jQuery slideToggle做到这一点，以便隐藏内容在单击div

0 个答案: