親の幅が0の場合、ネストされた要素を隠すにはどうすればよいですか？

Question

私は親の幅が0のときにネストされたpタグを隠そうとしています。ネストされたpタグは、その幅が0に近づくにつれて親に続き、展開するときに欲しいと思います。私はその何かがシンプルであることを確信しています。

Fiddle

HTML：

<div class="container"> 
    <div class="floater1"> 
    <p id="icon">X</p> 
    </div> 
    <div class="floater2"> 
    <p>This is a test</p> 
    </div> 
</div> 
<button>click</button> 

CSS：

.container { 
    width: 100%; 
    height: 35px; 
    border: 1px solid #000; 
} 
.floater1 { 
    float: left; 
    width: 0px; 
    height: inherit; 
    background: red; 
    text-align: center; 
    transition: width 200ms ease-in-out; 
} 
.show { 
    width: 30px; 
} 
.floater2 { 
    height: inherit; 
    background: yellow; 
    overflow: hidden; 
    padding-left: 15px; 
} 
p { 
    margin: 0; 
    line-height: 35px; 
} 

JS：

var trigger = $('button'); 
var deleteBtn = $('.floater1'); 
trigger.click(function(){ 
    console.log("hello") 
    deleteBtn.toggleClass('show'); 
}) 

Answer 1

オーバーフローを設定する必要があります。プロパティを".floater1"クラスに変更します。親幅は0です。

var trigger = $('button'); 
 
var deleteBtn = $('.floater1'); 
 
trigger.click(function(){ 
 
\t console.log("hello") 
 
\t deleteBtn.toggleClass('show'); 
 
})

.container { 
 
    width: 100%; 
 
    height: 35px; 
 
    border: 1px solid #000; 
 
} 
 
.floater1 { 
 
    float: left; 
 
    width: 0px; 
 
    height: inherit; 
 
    background: red; 
 
    text-align: center; 
 
    transition: width 200ms ease-in-out; 
 
    overflow:hidden; 
 
} 
 
.show { 
 
    width: 30px; 
 
} 
 
.floater2 { 
 
    height: inherit; 
 
    background: yellow; 
 
    overflow: hidden; 
 
    padding-left: 15px; 
 
} 
 
p { 
 
    margin: 0; 
 
    line-height: 35px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="floater1"> 
 
    <p>X</p> 
 
    </div> 
 
    <div class="floater2"> 
 
    <p>This is a test</p> 
 
    </div> 
 
</div> 
 
<button>click</button>

ここでの作業フィドルを参照してください

https://jsfiddle.net/davidsekar/7uk9n0ev/

Answer 2

が.floater1

に隠されたオーバーフローを追加するときのpタグが非表示になりますように

.floater1 { 
     overflow: hidden; 
    } 

https://jsfiddle.net/murtoza/7jusow54/1/

Answer 3

ちょうどあなたのCSSにこれらを追加します。

.floater1 p { 
    opacity: 0; 
    transition: opacity 250ms ease; 
} 
.floater1.show { 
    width: 30px; 
} 
.show p { 
    opacity: 1; 
} 

は、これが役立つことを願って！