jquery - 可折叠/滑动“托盘”（Div）

Question

从右向左滑动？

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

我一直在上述之间跳跃，试图让我的“托盘”工作无济于事。部分问题是我不希望其中一个 div 完全消失。我想要一个“托盘”，一个长矩形，单击它时，会滑出包含名称的 div。现在我将它设置为反向，但我不知道如何让扩展为默认隐藏的 div （*我也不明白为什么它们是不同的颜色，但具有相同的 CSS）。

http://jsfiddle.net/r6yWP/

HTML：

<div class ="collapsedTray">
<div class="expandTray">
    Joey Joe Joe Jr.</br>
    Tommy Thompson Thomas III</br>
    Stephen Stephenson </br>
    Cool Mo Dee Tomahawk Fire Marshall Bill</br>
</div>

CSS：

    .collapsedTray {
    width:10px;
    height: 500px;
    background:grey;
   opacity:0.5;
    position: absolute;
    left:0;
}

.expandTray {
    white-space: nowrap;
    height: 500px;
    background:grey;
   opacity:0.5;
    position: absolute;
    left:0;
    padding:8px;
}

Ĵ：

    $('.collapsedTray').click(function(){
   var $lefty = $('.expandTray');
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
});
    });

Answer 1

在 CSS 中给左值一个负值，以便它默认隐藏。

.expandTray {
   left:-999px;
}

见小提琴

不同的颜色是因为您在折叠托盘内有 expandTray，两者的不透明度均为 0.5，因此内部 div 具有更高的不透明度。