jquery - div外的绝对元素滑动时隐藏

Question

晚上好，

我有一段代码可以切换下拉菜单。在菜单中，有一些 DIV 位于其包含 DIV 的“外部”。一个 jsFiddle 可以在这里找到：http: //jsfiddle.net/nGSPg/3/

问题是，当播放“滑动”动画时，三角形被隐藏了。我的问题是：

• 为什么是这样？
• 我该如何解决这个问题？我希望三角形像它们包含的 div 一样向下和向上滑动。

提前致谢，
silox

Answer 1

更新：真正的问题实际上是 slide()在元素上将溢出设置为隐藏，所以它会隐藏它之外的任何东西。完成后，它将删除它，使它们再次出现。

---

因为三角形有position:absolute，所以它们只会在幻灯片完成后出现。为了解决这个问题，我会给他们一个位置：relative并将它们移到那个盒子外面，然后把它全部放在一个容器 div 中，这个容器 div 本身就会将幻灯片应用到它上面。

更新后的 HTML：

<span class="toggle">Admin</span> |

<div class="slidetoggle">
  <div class="triangle-big"></div>
  <div class="triangle-small"></div>

  <div class="slideHolder"> <a href="" title="" target="_blank">Forum</a>
    <br /> <a href="" title="" target="_blank">Website</a>
  </div>
</div> <span class="toggle">My account</span>

<div class="slidetoggle">
  <div class="triangle-big"></div>
  <div class="triangle-small"></div>

  <div class="slideHolder"> <a href="" title="">My profile</a>
    <br /> <a href="" title="">User panel</a>
    <br /> <a href="" title="">Log out</a>
    <br />
  </div>
</div>​

和CSS：

.toggle {
    cursor: pointer;
    padding: 2px 2px 0px 3px;
}

.slidetoggle {
    position: absolute;
    display: none;
}

.slideHolder{
    position: relative;
    background-color: white;
    padding:10px;
    top:0px;
    left: 0px;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px #c8c8c8;
    -webkit-box-shadow: 0 0 5px #c8c8c8;
    box-shadow: 0 0 5px #c8c8c8;
    text-align: left;
}

#login-links {
    padding: 2px 10px 0px 3px;
}

.triangle-big {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #C8C8C8;
    position: relative;
    top: 6px;
    left: 8px;
    z-index: 99;
}

.triangle-small {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
    position: relative;
    top:1px;
    left: 10px;
    z-index: 100;
}​

这是一个分叉的例子，它显示了它的工作原理。