父母寬度為0時如何隱藏嵌套元素？

Question

我試圖在其父寬度為0時隱藏嵌套的p標簽。從本質上講，我希望嵌套的p標簽在寬度接近0以及展開時跟隨父元素。 我敢肯定，這很簡單，感謝您的提前幫助。

小提琴

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

您必須設置overflow：hidden; 屬性為".floater1"類。 這樣，當父級寬度為0時，p標簽將被隱藏。

 var trigger = $('button'); var deleteBtn = $('.floater1'); trigger.click(function(){ console.log("hello") 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

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

希望對您有所幫助！