javascript - 打开内容时如何使按钮不掉落？

Question

我希望按钮始终位于顶部，当我单击其中一个按钮时，我希望内容显示在下方，而无需按下下方的其他按钮

这是 fiddle https://jsfiddle.net/9fk5r3v7/

抱歉关于 openload，它可以是任何东西，现在只是一个占位符 4

Answer 1

您的元素的顺序导致了这一点，因为 div 位于按钮之间，当显示一个时，它会将其后的按钮推到新的一行。

JSFiddle

<button type="button" name="cat"><img src="cat.jpeg" /></button>
<button type="button" name="dog"><img src="dog.jpeg" /></button>
<button type="button" name="dog2"><img src="dog.jpeg" /></button>
<button type="button" name="dog3"><img src="dog.jpeg" /></button>

<!-- dropdown content goes after the buttons -->

<div id="catdiv" class="hide">
<!-- Content here -->
</div>
<div id="dogdiv" class="hide">
<!-- Content here -->
</div>
<div id="dog2div" class="hide">
<!-- Content here -->
</div>
<div id="dog3div" class="hide">
<!-- Content here -->
</div>