jquery - 为什么单击显示/隐藏菜单时我的文字会弹起一行

Question

为什么单击显示/隐藏菜单显示段落文本时，我的段落文本会弹跳大约一行？我猜是填充或边距之类的。

 $(document).on('click touchstart', '.button', function() {
   $('.target-button[data-trigger="' + $(this).attr('id') + '"]').slideToggle(100);
 });

#main_text {
  float: none;
}
.scripture {
  width: 100%;
  padding-top: 30px;
}
.scripture ul {
  list-style-type: none;
  margin: 0;
  background-color: black;
  text-align: center;
}
.scripture li {
  display: inline;
  padding-right: 2em;
  font-weight: bold;
}
.scripture a {
  color: white;
}
.scripture h3 {
  padding: 0;
  margin-top: 0;
}
.scripture h2 {
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="scripture">
  <UL>
    <li><a id="one" class="button">Expand/Contract</a>
    </li>
  </UL>

  <div class="one">
    <h2>Lively Bones</h2>
    <h3>John 11:1-44</h3>

    <div class="target-button" data-trigger="one" style="display:none;">
      <div id="one1">

        <P>“Ezekiel connected them dry bones, Ezekiel connected them dry bones, Ezekiel connected them dry bones, Now hear the word of the Lord.”</P>

      </div>
    </div>
  </div>
</div>

Answer 1

这是由于 .slideToggle(100) 代码而发生的。尝试简单地使用 .toggle()，因为幻灯片似乎并没有做太多事情。