javascript – 为什么div内容会在幻灯片效果后跳转

2019年8月4日 195次阅读 
  <style>
  #toggle {
    width: 150px;
    height: 50px;
    background: crimson;
    color: white;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<body>
<button id="clickme">Click moi</button>
<div id="toggle">
  <p>This will slide in and out.</p>
</div>

<script>
$( document ).ready(function() {
  $('#clickme').click(function () {
    $( "#toggle" ).toggle( "slide" );
  });
});
</script>

#toggle div的高度在幻灯片效果之前/期间/之后应该是恒定的.由于某种原因,div滑出然后高度增加到50px.我想知道为什么会这样.

最佳答案 删除了p,因为此示例不需要.这是有效的,见这里：

http://jsfiddle.net/3bVZy/

如果您需要p,请告诉我.

编辑
对于相同的距离,在此示例中,将以下内容添加到#toggle CSS：

  position: relative;
  top:15px;
点赞