Question

晚上好，

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

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

这是为什么？
我该如何解决这个问题？我想让三角形向下滑动，就像它们包含的div一样。

提前致谢，
SILOX

Answer 1

更新：真正的问题实际上是slide（）将溢出设置为元素上的隐藏，因此它会隐藏任何内容它。完成后，它将删除它，使它们再次出现。

因为三角形具有位置：绝对，所以它们仅在幻灯片完成后出现。为了解决这个问题，我会给他们一个位置：相对并将它们移到该框之外，然后将全部放在一个容器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;
}

Here's a forked example that shows it working.

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

1 个答案: