jquery - 单击时展开 li 元素 100% 宽度并将同级元素推出

Question

我想要将 li 元素排列在任意数量的列中。

<ul>
    <li class="yellow">
        Yellow Block
    </li>
    <li class="red">
        Red Block
    </li>
    <li class="green">
        Green Block
    </li>
</ul>

当单击其中一列时，我希望该 li 增长到 100%，并将其同级列推出 View 之外。

$('li').on("click", function(){
    $(this).addClass("active");
    $(this).siblings().addClass("nonActive");
})

我宽松地使用术语“ View 的插入”，尽管这只是所需的视觉效果，动画可能涉及插入/移动、隐藏或宽度变化，以看起来最干净的为准。

我尝试过的:

将点击宽度设置为 100%，将同级宽度设置为 0%:

https://jsfiddle.net/bo28dy10/

.active{
    width: 100%;
}
.nonActive{
    width 0%;
}

问题:收缩时会导致自动换行，无法设置无换行，因为某些情况下标签会以全宽度换行。

将点击宽度设置为 100%，将包装器设置为溢出:隐藏: https://jsfiddle.net/gqqeq4wu/

.active{
    width: 100%;
}
ul{
    overflow: hidden;
}

问题:这只是迫使 sibling 向下排，而不是将它们推出，我无法在父级上设置固定高度。

将点击宽度设置为 100%，将同级设置为显示:无: https://jsfiddle.net/xf0om99t/

.active{
    width: 100%;
}
.nonActive{
    display:none;
}

问题:您无法在显示上使用动画:无，我希望这是一个平滑的过渡。

那么模拟这种外观的正确方法是什么？

(奖励:如果我可以去掉列宽(即 33.33%)，并且让这些列自动扩展以均匀地填充父级，那就太好了，我可能在考虑 Flexbox？)

Answer 1

你就快到了

overflow:hidden;
white-space:nowrap;

就可以了。漂亮又流畅

看这里

https://jsfiddle.net/bo28dy10/2/