时间戳

首页 > 解决方案 > 0 高度导航栏仍然可见？

javascript - 0 高度导航栏仍然可见？

问题描述

我正在设计一个投资组合网站，并希望在您单击投资组合时让我的作品滑到屏幕上，就像单击菜单图标时导航栏会滑过一样。我的代码适用于左右导航栏，但对于底部，即使高度为 0，它仍然显示块

不幸的是，使用 display:none 并将其更改为 display:block 与 jquery 删除了它滑动到屏幕上的平滑动画。

html

        <div id="portfolionav" class="portfolionav">
            <a href="javascript:void(0)" class="closebtn" 
             onclick="closeNav2()">&#9755;</a>
            <a href="#">testing</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>

        <div id=bottom>
            <h1 onclick="openNav2()">PORTFOLIO</h1>
        </div>

css

        .portfolionav {
           height: 0;
           width: 100%;
           position: fixed;
           z-index: 3;
           bottom: 0;
           background-color: #111;
           overflow-x: hidden;
           transition: 0.5s;
           padding-top: 60px;
           display: block;
        }

        .portfolionav a {
           padding: 8px 8px 8px 32px;
           text-decoration: none;
           font-size: 25px;
           color: #818181;
           display: block;
           transition: 0.3s;
        }

        .portfolionav a:hover {
           color: #f1f1f1;
        }

        .portfolionav .closebtn {
           position: absolute;
           bottom: 25px;
           right: 75px;
           font-size: 36px;
           writing-mode: vertical-rl;
        }

javascript

        function openNav2() {
            document.getElementById("portfolionav").style.height = "100vh";
        }

        function closeNav2() {
            document.getElementById("portfolionav").style.height = "0";
        }

标签： javascriptjqueryhtmlcss

解决方案

使用 display: none 代替高度。

推荐阅读