Question

我有一个设置为宽度的菜单：加载页面时为0px。单击图标后，jQuery脚本将菜单的宽度设置为100vw，因此可以很好地显示所有菜单项（链接）。我的问题是，当宽度设置为0时，菜单中的链接不会像我想要的那样消失，它们只会被压缩到左边。当宽度设置为0时，如何使链接完全消失？然后，当宽度设置为100vw时，重新出现？

我已经尝试过制作一个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>

Answer 1

使用overflow:hidden隐藏div内容

Answer 2

这是工作JSFIDDLE

默认情况下，溢出属性为visible。这就是为什么当宽度为0px时，文本是可见的。因此，当我们将溢出设置为hidden时，文本将在宽度为0px时隐藏。

Answer 3

如果您可以更改加价，那将是我的第一个建议。在元素中放置内联元素（如<a>），可以自由地将样式应用于菜单项的内部内容。

注意：图标需要不在此内。

然后设置一个最初隐藏内部内容的规则，单击您可以切换内联样式或添加一个新类，其中包含将显示内容的预设样式。

通过向添加转换，您可以通过CSS悬停样式获得类似的结果。

内部transition: .7s;上的

E.g： ，然后在父元素<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;
}

Answer 4

测试元素宽度的正确位置在animate回调中，您可以使用0代替0px：

    $("#menu").animate({width:(isLarge ? '0px' : '100px')}, function(){
        if( $(this).width() == 0 ) { 
            $( ".menu-item" ).empty();
        }
    });

isLarge = false;
$(".on-menu").click(function(e){
    e.preventDefault();
    $("#menu").animate({width:(isLarge ? '0px' : '100px')}, function(){
        if( $(this).width() == 0 ) {
            $( ".menu-item" ).empty();
        }
    });
    isLarge = !isLarge;    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
    <div class="menu-item">
        <a href="#section-1" class="on-menu">Home</a>
    </div>
    <div class="menu-item">
        <a href="#section-2" class="on-menu">Profile</a>
    </div>
    <div class="menu-item">
        <a href="#section-3" class="on-menu">Contact</a>
    </div>
</div>

Answer 5

溢出：隐藏会完成这项工作。

当div width设置为0时，如何删除div中的文本？

5 个答案: