クリックして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％に成長したいクリックするとその兄弟が視野の外に押されるように。

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

私はそれがちょうど所望の視覚効果であるとして、アニメーションはプッシュ/運動、隠ぺい、またはクリーンに見え方の幅の変更を伴う可能性が緩くても、「ビューののプッシュ」という用語を使用しています。

設定が0％に、100％、兄弟姉妹に幅をクリック：

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パーセント）を取り除くことができ、ちょうどこれらのカラムは素晴らしいだろうと同じように親を埋めるために、自動的に拡張している場合は、私はおそらくフレキシボックスを考えている）

Answer 1

こちらをご覧ください。私はdivを追加して、さまざまな数のliで動作することを示しました。

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

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

Answer 2

margin-rightとopacityを使って、以下のように試してみたらどうでしょうか？

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

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; 
 
}

<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>

Answer 3

あなたは

ほとんどが

overflow:hidden; 
white-space:nowrap; 

たトリックを行います。いいと

スムーズには、私は、各リチウムの最小幅を設定するためのjQueryを使用している

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

Answer 4

あなたは幅、パディングと兄弟のフォントサイズ変更しようとすることができます：ビューからそれらを "プッシュ" なぜ

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

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{ 
 
    padding: 23px 0px; 
 
    width:0; 
 
    font-size:0; 
 
}

<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>