当父级宽度为0时,如何隐藏嵌套元素
How to hide nested element when parents width is 0?
当嵌套的p标记的父级宽度为0时,我试图隐藏它。本质上,我希望嵌套的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');
})
您必须设置溢出:隐藏;属性设置为".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/
将溢出隐藏添加到.foatter1
.floater1 {
overflow: hidden;
}
https://jsfiddle.net/murtoza/7jusow54/1/
只需将这些添加到您的css中即可:
.floater1 p {
opacity: 0;
transition: opacity 250ms ease;
}
.floater1.show {
width: 30px;
}
.show p {
opacity: 1;
}
希望这能有所帮助!
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 显示5秒后隐藏潜水
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 浮动页脚栏-使用Bootstrap隐藏
- 在jquery中为显示/隐藏设置cookie
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 从var向代码隐藏函数传递值
- Image赢得't隐藏在滚动jQuery上
- 具有rowGrouping的数据表无法隐藏列
- Jquery隐藏未触发
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 隐藏隐藏的输入字段;检查元件”;
- 如何防止在取消隐藏/隐藏文本后滚动到顶部
- 如何通过 JavaScript 取消隐藏隐藏的 asp 元素
- Jquery-显示/隐藏隐藏的输入表单字段
- 隐藏/隐藏的最佳方式't基于配置文件加载HTML部件
- 取消隐藏/隐藏类
- 在 JavaScript 中使用重排隐藏元素,它与 CSS 隐藏属性有何不同
- 使用HTML/JavaScript/CSS隐藏隐藏元素