使用jQuery防止div在切换时被推下

Question

我有两个在点击时打开的div。虽然这个函数工作得非常流畅，但第一个div会将第二个div向下推。我希望它们能够保持在彼此的旁边。

我创建了一个JS Fiddle， http://jsfiddle.net/Qskxa/1/

我认为问题出在HTML文件中吗？

谢谢！

<div id="artistsbox">
  <div class="artist">
    <ul class="ulartists">
      <li> 
        <span class="toggle">Artist 1</span>
        <div class="toggle_hide">
          <p> Hello world</p>
        </div>
      </li>
      <li>
        <span class="toggle">Artist 2</span>
        <div class="toggle_hide">
          <p> Hello world</p>
        </div> 
      </li>
    </ul>
  </div>  
</div>

- Dymond

Answer 1

我不太确定你想要什么（是要将按钮并排吗？），但如果你使用CSS定位，可以将隐藏的图像从文档流中移除，避免下推：

http://jsfiddle.net/Qskxa/10/

.toggle_hide{
    display:none;
    position: relative;
}

.toggle_hide img {
    position: absolute;
    left: 0;
    top: 0;
}

根据您的需要更改值/位置 :)

- MassivePenguin

---

看起来在 jsfiddle 上很好，但在我的网站上 div 仍然被推下了。 =/ - Dymond

你在网站上使用了图片、段落还是混合标签？如果是段落，请将.toggle_hide img更改为.toggle_hide p。如果是混合内容，请在其周围添加一个包装器，并在该包装器上使用position: absolute。没有看到你的网站（或确切的HTML/CSS而不是一个测试用例jsFiddle），很难解决你的问题。 - MassivePenguin

这是一个图像和段落混合的页面。我会尝试整理一下，看看效果如何 :) 否则，页面在此处：http://felipe.ungoogleable.se/gallery/progresso-2/ - Dymond

问题出在完全不同的CSS区域 :) 我改变了一个类名为“artist”，现在它可以正常工作了。感谢所有的帮助。 - Dymond

啊，抱歉，我总是忘记延迟 -_- - MassivePenguin