javascript - 多个 div - 水平滑出内容

Question

我整天盯着显示器，也许时间太长了，当问题很简单时，我却把问题变得太复杂了。希望这里的某个地方可以用数字方式打我一巴掌，并为我指明正确的方向。

三个元素向左浮动并绝对定位在容器内。每个元素的切换都会打开以显示默认情况下隐藏的 sliderContent。单击后，包围的元素将被推到一边而不是重叠。

代码:

<ul class="accordion">

<li class="item one">
    <div class="slideContent">
            Slider content
    </div>

</li>
<li class="item two">

     <div class="slideContent">
             Slider content
    </div>

</li>
<li class="item three">

     <div class="slideContent">
             Slider content
    </div>

</li>

 .accordion {
    list-style:none;
    position:relative;
}


 .item {
    width:25%;
    height:200px;
    background:#ccc;
    z-index: 0;
    margin-top: 10px;
    left: 0;
    position: absolute;
}

.slideContent {
    background:white;
    position:absolute;
    height:100%;
    width:100%;
 }

.one {
    background:black;
}
.two{
    background:green;
    left: 25%;
}
.three {
    background:blue;
    left:50%;
}
.four {
    left: 75%;
}

JS:

$('.slideContent').hide();


$('li.item').click(function(){
    $(this).css({zIndex: 9999}).animate({left:'0px', width: '100%'})
    $(this).$('.slideContent').show();
});

到目前为止的 fiddle :http://jsfiddle.net/ywL5n4w9/2/

为了帮助解释，我制作了一张精美的图像。

希望这是有道理的，这可能是晦涩难懂的内容，为此我责怪 11 杯以上的咖啡。

Answer 1

您的项目是绝对定位的，这大致意味着它们失去了影响其他元素的能力，包括将它们推到一边。

如果您将 .item 从 position:absolute 更改为 float:left 并删除 position:absolute code> 来自 .slideContent，它似乎有效。

新jsfiddle here