3

こんばんは、

ドロップダウン メニューを切り替えるコードがあります。メニューには、含まれる DIV の「外側」に配置された DIV がいくつかあります。jsFiddle はここにあります: http://jsfiddle.net/nGSPg/3/

問題は、「スライド」アニメーションの再生中に、三角形が非表示になることです。私の質問は次のとおりです。

  • どうしてこれなの？
  • これを解決するにはどうすればよいですか？含まれているdivと同じように、三角形を上下にスライドさせたいと思います。

前もってありがとう、
シロックス

4

1 に答える 1

3

更新:実際の問題は、slide()が要素のオーバーフローを非表示に設定するため、要素の外側にあるものはすべて非表示になることです。終了すると削除され、再び表示されます。

三角形にはposition:absoluteがあるため、スライドが終了した後にのみ表示されます。これを修正するには、position: relativeを指定し、それらをそのボックスの外に移動して、それ自体がスライドを適用するコンテナー 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;
}​

これが機能することを示すフォークされた例を次に示します。

于 2012-08-31T21:00:52.860 に答える