Javascript 当父元素宽度为0时,如何隐藏嵌套元素?
当嵌套的p标记的父宽度为0时,我试图隐藏该标记。本质上,我希望嵌套的p标记在其宽度接近0时跟随父标记,以及在其展开时跟随父标记。我相信这很简单,谢谢你的帮助 HTML:Javascript 当父元素宽度为0时,如何隐藏嵌套元素?,javascript,jquery,css,Javascript,Jquery,Css,当嵌套的p标记的父宽度为0时,我试图隐藏该标记。本质上,我希望嵌套的p标记在其宽度接近0时跟随父标记,以及在其展开时跟随父标记。我相信这很简单,谢谢你的帮助 HTML: <div class="container"> <div class="floater1"> <p id="icon">X</p> </div> <div class="floater2"> <p>This is a
<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>
.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;
}
var trigger = $('button');
var deleteBtn = $('.floater1');
trigger.click(function(){
console.log("hello")
deleteBtn.toggleClass('show');
})
JS:
<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>
.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;
}
var trigger = $('button');
var deleteBtn = $('.floater1');
trigger.click(function(){
console.log("hello")
deleteBtn.toggleClass('show');
})
您必须设置溢出:隐藏;属性设置为
”.flooter1“
类。这样,当父宽度为0时,p标记将被隐藏
var触发器=$('button');
var deleteBtn=$('.flooter1');
触发器。单击(函数(){
log(“你好”)
deleteBtn.toggleClass('show');
})
.container{
宽度:100%;
高度:35px;
边框:1px实心#000;
}
.漂浮物1{
浮动:左;
宽度:0px;
身高:继承;
背景:红色;
文本对齐:居中;
过渡:宽200ms,易于进出;
溢出:隐藏;
}
.表演{
宽度:30px;
}
.漂浮物2{
身高:继承;
背景:黄色;
溢出:隐藏;
左侧填充:15px;
}
p{
保证金:0;
线高:35px;
}
X
这是一个测试
单击
将溢出隐藏添加到.floater1
.floater1 {
overflow: hidden;
}
只需在css中添加以下内容:
.floater1 p {
opacity: 0;
transition: opacity 250ms ease;
}
.floater1.show {
width: 30px;
}
.show p {
opacity: 1;
}
希望这能有所帮助 哇,很简单…谢谢你的快速回复。