当div宽度设置为0时，如何处理div中的文本？
在加载页面时，我有一个设置为宽度: 0px的菜单。单击图标后，jQuery脚本将菜单的宽度动画为100 of，因此很好地显示了所有菜单项(链接)。我的问题是，当宽度设置为0时，菜单中的链接不会像我希望的那样断开，它们只会被压缩到左边。当宽度设置为0时，如何使链接完全消失？然后，当宽度设置为100 to时，重新出现？
我已经尝试过做一个if语句，如果宽度设置为0，那么链接是空的，但这似乎不起作用。
提前感谢任何人的帮助。
<div id="menu">
<div class="menu-item">
<a href="#section-1" onclick="$('#on-menu').click();">Home</a>
</div>
<div class="menu-item">
<a href="#section-2" onclick="$('#on-menu').click();">Profile</a>
</div>
<div class="menu-item">
<a href="#section-3" onclick="$('#on-menu').click();">Contact</a>
</div>
</div>
<script>
/*When icon (#on-menu) is clicked, this animates width from 0px to 100vw*/
isLarge = false;
$("#on-menu").click(function(){
$("#menu").animate({width:(isLarge ? '0px' : '100vw')});
isLarge = !isLarge;
});
/*This, below, is what I tried but doesn't work*/
if($("#menu").width() == '0px'){
$( ".menu-item" ).empty();
}
</script>回答 5
Stack Overflow用户
发布于 2015-09-07 05:25:24
使用overflow:hidden隐藏div内容
Stack Overflow用户
发布于 2015-09-07 05:33:21
这是工作的JSFIDDLE
默认情况下，溢出属性将是visible。这就是为什么当宽度为0px时，文本是可见的。因此，当我们将溢出设置为hidden时，当宽度为0px时，文本将隐藏。
Stack Overflow用户
发布于 2015-09-07 05:50:04
，如果你能改变标记，那将是我的第一个建议。将内联元素(如<span></span> )放置在<a>元素中，可以让您自由地将样式应用于菜单项的内部内容。
注：图标将需要远离这个内部<span>。
然后设置一个最初隐藏内部<span>内容的规则，单击onclick，您可以切换内联样式，也可以添加一个带有预置样式的新类，这些样式将显示<span>内容。
您可以通过向<span>添加一个转换来实现CSS悬停样式的类似结果。
例如:内部<span>上的 transition: .7s;，然后在父元素<a>标记悬停时对其应用新的宽度。随着新宽度的应用，它应该会很好地滑出。当然，一旦您悬停，它将恢复，但想法是允许CSS处理任何动画或转换，它可以消除对javascript的一些依赖。
否则，尝试如下：
把这个粘贴在你的浏览器网址栏里..。
data:text/html,<div id="menu"> <div class="menu-item"> <a href="#section-1" onclick="$('#on-menu').click();">Home</a> </div> <div class="menu-item"> <a href="#section-2" onclick="$('#on-menu').click();">Profile</a> </div> <div class="menu-item"> <a href="#section-3" onclick="$('#on-menu').click();">Contact</a> </div> </div>然后加入这些风格然后四处游玩..。
.menu-item a {
width: 0px;
display: block;
overflow: hidden;
}
.menu-item:nth-child(even) {
background-color: gray;
}
.menu-item:nth-child(odd) {
background-color: lightgray;
}https://stackoverflow.com/questions/32431549
复制相似问题
腾讯云开发者
