Jquery 单击“展开li元素100%宽度”并将其推出

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

我松散地使用术语“视图的推送”，尽管这只是期望的视觉效果，动画可能涉及推送/移动、隐藏或宽度更改，以看起来最干净的为准

我所尝试的： 将单击宽度设置为100%，将同级设置为0%：

问题：缩小时会导致文字换行，无法设置“不换行”，因为在某些情况下，标签要全宽换行

将单击宽度设置为100%，将包装设置为溢出：隐藏：

问题：这只是迫使兄弟姐妹排下一行，而不是将他们推出，我无法在父代上设置固定高度

将单击宽度设置为100%，将同级设置为显示：无：

问题：您不能在屏幕上使用动画：无，我希望这是一个平滑的过渡

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

---

（奖励：如果我可以去掉列宽（即33.33%），让这些列自动扩展以均匀填充父列，那将是非常棒的，我想flexbox可能？

如果我们使用右边距和不透明度尝试下面的方法会怎么样

$（'li'）。在（“单击”，函数（）上）{
$（此）.addClass（“活动”）；
$（this.this（）.addClass（“非活动”）；
})

ul{
宽度：400px；
列表样式类型：无；
}
李{
宽度：33.33%；
浮动：左；
填充：15px 0px；
文本对齐：居中；
过渡：0.6s全部；
}
瑞德先生{
背景：红色；
}
黄先生{
背景：黄色；
}
格林先生{
背景：绿色；
}
.主动{
宽度：100%；
}
.不活跃{
右边距：-400px；
不透明度：0；
}

黄块


红砖


绿块

你就快到了

overflow:hidden;
white-space:nowrap;

这就是诀窍。光滑

看这里

---

我使用jQuery设置每个li的最小宽度。我添加了一个div来显示它可以与不同数量的li一起工作

liLen = $( "ul" ).width()/$( "li" ).length
$("li").children('div').css("min-width", liLen+"px");

---

您可以尝试更改同级的宽度、填充和字体大小：

$（'li'）。在（“单击”，函数（）上）{
$（此）.addClass（“活动”）；
$（this.this（）.addClass（“非活动”）；
})

ul{
宽度：400px；
列表样式类型：无；
}
李{
宽度：33.33%；
浮动：左；
填充：15px 0px；
文本对齐：居中；
过渡：0.6s全部；
}
瑞德先生{
背景：红色；
}
黄先生{
背景：黄色；
}
格林先生{
背景：绿色；
}
.主动{
宽度：100%；
}
.不活跃{
填充：23px 0px；
宽度：0；
字号：0；
}

黄块


红砖


绿块

为什么要将它们“推”到视线之外？只需

.hide（）

其他同级将容易得多，因此它们不再是布局计算的一部分。@MarcB这基本上就是我在第三把小提琴中尝试的，我想对它们进行动画处理，这是你无法使用显示的：无，因此它们会突然消失，并将活动元素捕捉到左侧。如果有更好的方法，尽管我会很感激。然后使用css转换将它们的宽度设置为0。@MarcB这是我在第一小提琴中所做的…Flexbox可以提供帮助，但文本包装仍然是一个问题，-这是我的第一个想法，直到我读到“无法设置不换行，因为在某些情况下，标签将以全宽换行“@RouthMedia是的，不幸的是，我想避免设置nowrap，某些情况可能需要更大的文本标签。不过，我很感谢你的努力。我想要的答案是没有阅读整个问题！：）@RouthMedia不用担心，在大多数情况下，我相信这是正确的。我只是处于一个挑剔的情况。不错，它确实为兄弟姐妹保留了一些动画，而不是仅仅隐藏他们，我只是不太喜欢这种外观。尽管如此，我还是很感激，并将铭记在心+1Okay@DasBeasto但如果我们进行bit训练，可以获得一些推动效果：-）非常好，这正是我希望它看起来的样子。有点复杂，但我觉得值得。我个人会稍微简化.js，

$（“li”）.children（'div'）.css（“minwidth”，$（“li”）.width（））将完成相同的事情。我将再花一点时间来看看是否只提供CSS的解决方案，如果没有，我会接受。谢谢
.active{
    width: 100%;
}
.nonActive{
    width 0%;
}

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

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

overflow:hidden;
white-space:nowrap;

liLen = $( "ul" ).width()/$( "li" ).length
$("li").children('div').css("min-width", liLen+"px");