Question

我有一些代码在使用切换按下按钮时打开div。但我希望div直接显示在按钮下方，没有空白区域。但是，只有在有两个换行符时，代码才有效。为什么这样，我怎样才能让它正常工作？

HTML：

<div style="margin-left: auto; margin-right: auto; width:80%;" class="article-toggle" >
<button style="margin-left: auto; margin-right: auto; width:100%;">Open/Close the box</button>
</div><br /><br />
<div style="display:none; margin-left: auto; margin-right: auto; background-color: #4CF; width:80%; height:200px;">Box Opened</div>

<script>
$('.article-toggle').click(function() {
$(this).next().next().next().slideToggle('fast');
return false;
});
</script>

这是一个jsfiddle，显示按下按钮时的间隙：

http://jsfiddle.net/fpzj8z04/

如果你删除了中断，你可以看到它停止工作。

非常感谢任何帮助，谢谢！

Answer 1

删除＆lt; br＆gt;并相应地调整您的选择器：

<div style="margin-left: auto; margin-right: auto; width:80%;" class="article-toggle" >
  <button style="margin-left: auto; margin-right: auto; width:100%;">Open/Close the box</button>
</div>
<div style="display:none; margin-left: auto; margin-right: auto; background-color: #4CF; width:80%; height:200px;">Box Opened</div>

<script type="text/javascript">
$('.article-toggle').click(function() {
  $(this).next().slideToggle('fast');
  return false;
});
</script>

直接在按钮下切换div

1 个答案: