Javascript 0高度导航栏是否仍然可见？

我正在设计一个公文包网站，希望当你点击公文包时，我的作品可以滑到屏幕上，就像你点击菜单图标时导航栏滑到屏幕上一样。我的代码适用于左右两侧的导航条，但对于底部，即使高度为0，它仍然显示块

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

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>

---

使用display:none代替height。

一旦公文包div被固定，您就可以使用top属性，而不是通过高度来控制动画。您还必须将默认高度设置为100vh

因此，您的

portfolionav

应该是：

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

以及您的JavaScript函数：

function openNav2() {
  document.getElementById("portfolionav").style.top = "0";
}

function closeNav2() {
  document.getElementById("portfolionav").style.top = "100vh";
}

---

现在，您只需根据需要调整手动按钮。

您可以将

高度

和

填充顶部

组合用于显示和隐藏导航，因为当您设置

高度：0px


函数openNav2（）{
调试器；
document.getElementById（“portfolionav”）.style.height=“100vh”；
document.getElementById（“portfolionav”）.style.paddingTop=“60px”；
}
函数closeNav2（）{
document.getElementById（“portfolionav”）.style.height=“0”；
document.getElementById（“portfolionav”）.style.paddingTop=“0”；
}

.portfolionav{
身高：0；
宽度：100%；
位置：固定；
z指数：3；
底部：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：0px；
显示：块；
}
.portfolionav a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.portfolionav a:悬停{
颜色：#f1f1；
}
.portfolionav.closeb.关闭{
位置：绝对位置；
底部：25px；
右：75px；
字体大小：36px；
写入方式：垂直rl；
}

文件夹

唯一的问题是div向上滑动填充屏幕的动画不再平滑。它只是啪的一声。

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

function openNav2() {
  document.getElementById("portfolionav").style.top = "0";
}

function closeNav2() {
  document.getElementById("portfolionav").style.top = "100vh";
}