Javascript 下拉菜单效果

我有一个下拉菜单，单击按钮时显示，再次单击时消失。我想知道如何让菜单从下到上消失，而不是立即消失。我不是要确切的代码，只是需要指向正确的方向。多谢各位

let nav = document.querySelector("nav");
let icon = document.querySelector(".mobile-icon");
console.log(nav);
icon.addEventListener("click", showMenu);

function showMenu() {
if (nav.style.display == "none"){
nav.style.display = "block";
} else {
    nav.style.display = "none";
}

}

---

我的解决方案是创建一个类，将菜单的高度设置为0px，然后使用JavaScript打开和关闭它

我在JSFIDLE中创建了一个小模型，并对重要部分进行了一些评论

指向JSFIDLE的链接是-

下面是代码：

HTML-

<button> Hide/Show </button>

<ul>
  <li> Link 1 </li>
  <li> Link 2 </li>
  <li> Link 3 </li>
  <li> Link 4 </li>
</ul>

JS-

---

这是我的解决方案，您不能对

高度
属性使用
转换
，因此我们使用
最大高度
。问题是我们需要在
px
中设置高度才能使此解决方案工作，因此请使用此解决方案并进行测试


让nav=document.querySelector（“nav”）；
让icon=document.querySelector（“.mobile icon”）；
图标。addEventListener（“单击”，显示菜单）；
导航查询选择器（“ul”）.style.margin=“16px 0px”；
nav.style.maxHeight=nav.querySelector（“ul”）.clientHeight+32+“px”；
函数showMenu（）{
切换（“隐藏”）；
}
nav{
过渡：最大高度为0.5s；
高度：自动；
溢出：隐藏；
}
希德提斯导航{
最大高度：0px！重要；
}
切换

一,
二,
三,

如果您正在拖动
显示
属性，这是不可能的。听起来您需要设置高度动画。如果我没记错的话，Jquery有
slideToggle
。最好创建这样的css类：
。slideUp{height:0；overflow:hidden；transstion:height 300ms ease；}
然后在javascript中切换该类。实际上，您可能必须将其作为所有解决方案的默认样式。以上两个都很好，我只是好奇。我才学了大约一个月。单击按钮时，为什么不能将nav.style.height从0px更改为auto。它显示和隐藏下拉菜单，但忽略转换。@JohnAuer Transitioning gradients：不是每个CSS属性都可以转换，基本规则是只能通过绝对值进行转换。例如，不能在0px的高度与自动之间转换。浏览器无法计算中间过渡值，因此特性更改是即时的。请参阅《非常感谢您的回复》@Naren Murali。最后一个问题…..为什么函数showMenu（）{if（nav.style.height==“0px”）{nav.style.height=“450px”}或者{nav.style.height=“0px”}
ul {
  /* Give the ul a transition to run smoothly */
  transition: all .5s;
  list-style:none;
  padding:0;
  margin:20px 0px;
  background-color:#D6D6D6;

  /* Make sure overflow is hidden so when the hight is droped to 0px the li elements stay hidden */
  overflow:hidden;

  /* Give the ul a default hight to revert to, without this the transiton won't work */
  height:160px;
}

li {
  padding: 10px 20px;
}

/* This is the class that will be added with JavaScript */
.hide {
  height:0px;
}

// Assign the ul and the button to a variable
var ul = document.getElementsByTagName('ul')[0],
        btn = document.getElementsByTagName('button')[0];

// Create a function that lets the class 'hide' be toggled on and off the ul
function dropDown(){
    ul.classList.toggle('hide');
}

// Assign the function to the button with an EventListener
btn.addEventListener('click',dropDown,false);