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

Question

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

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

当其中一列被点击时，我希望 li 增长到 100% 并且它的 sibling 被推出视野。

$('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%，将 sibling 设置为显示:无: https://jsfiddle.net/xf0om99t/

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

问题:您不能在 display:none 上使用动画，我希望这是一个平滑的过渡。

那么模拟这个look的正确方法是什么？

(奖励:如果我可以摆脱列宽(即 33.33%)并且让这些列自动展开以平等地填充父级，那会很棒，我在考虑 flexbox 吗？)

Answer 1

你快到了

overflow:hidden;
white-space:nowrap;

成功了。漂亮又光滑

看这里

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