Question

  <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。我想知道为什么会这样。

Answer 1

删除p，因为此示例不需要。这是有效的，见这里：

http://jsfiddle.net/3bVZy/

如果您需要p，请与我们联系。

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

position: relative; top:15px;

Answer 2

问题是Paragraphe保证金，如果你将paragraphe P保证金设置为0，它会完美地运作

  p { margin: 0; }

这将解决您的问题

Answer 3

试试这个

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

我更改了jquery引用以及css部分

Demo1

Demo2

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

3 个答案: