我尝试了什么：

Question

我希望li元素排列在任意数量的列中。

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

当点击其中一列时，我希望li增长到100％并将其兄弟姐妹推出视野。

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

我正在使用术语＆＃34;推动视图＆＃34;虽然这只是所需的视觉效果，但动画可能涉及推动/移动，隐藏或宽度变化，无论哪个看起来最干净。

我尝试了什么：

将点击的宽度设置为100％，将兄弟姐妹设置为0％：

https://jsfiddle.net/bo28dy10/

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

问题：在收缩时导致自动换行，无法设置无包装，因为有些情况下标签要以全宽度换行。

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

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

问题：这只是迫使兄弟姐妹连续而不是推出它们，我无法在父母身上设置固定的高度。

将点击的宽度设置为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/

Answer 2

如果我们使用margin-right和opacity尝试以下内容，该怎么办？

＆＃13;

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

＆＃13;

ul{
  width: 400px;
  list-style-type: none; 
}
li{
  width: 33.33%;
  float: left;
  padding: 15px 0px;
  text-align: center;
  transition: 0.6s all;
}
.red{
  background: red;
}
.yellow{
  background: yellow;
}
.green{
  background: green;
}
.active{
  width: 100%;
}
.nonActive{
  margin-right:-400px;
  opacity:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="yellow">
Yellow Block
</li>
<li class="red">
Red Block
</li>
<li class="green">
Green Block
</li>
</ul>

＆＃13;

Answer 3

我使用jQuery来设置每个li的最小宽度。我添加了一个div来表明它适用于各种数量的li。

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

https://jsfiddle.net/bo28dy10/4/

Answer 4

您可以尝试更改兄弟姐妹的宽度，填充和字体大小：

＆＃13;

store_name

＆＃13;

created_at

＆＃13;

created_at

＆＃13;

点击展开li元素100％宽度并推出兄弟姐妹

我尝试了什么：

4 个答案: