如何设置下拉菜单的速度

how to set the speed of dropdown menu?

本文关键字：下拉菜单 速度 设置 何设置      更新时间：2023-09-26

首先，我使用javascript在html中创建了一个选项卡内容，现在，我将其转移到一个下拉内容中。我的问题是，如何设置删除内容的速度。你能给我一个例子或想法我该如何解决这个问题吗。谢谢你的回复。

这是我的示例代码：

<html>
<head>
<script type="text/javascript">
function sample(){
if(document.getElementById("cute").style.display=="none"){
document.getElementById.("cute").style.display="";
 document.getElementById.("ugly").style.display="none";
  document.getElementById.("good").style.display="none";
}
}
function samplez(){
if(document.getElementById("good").style.display=="none"){
document.getElementById.("good").style.display="";
 document.getElementById.("cute").style.display="none";
  document.getElementById.("ugly").style.display="none";
}
}
function samplex(){
if(document.getElementById("ugly").style.display=="none"){
document.getElementById.("ugly").style.display="";
 document.getElementById.("cute").style.display="none";
  document.getElementById.("good").style.display="none";
}
}
</script>
</head>

这是机身代码：

<body>
<ul>
<li><a href="#" onclick="return false; sample();">Sample</a></li>
 <p id ="cute" style = "display:none;">This is sample 1.</p>
<li><a href="#" onclick="return false; samplex();">Sample x</a></li>
 <p id ="good" style = "display:none;">This is sample 2.</p>
<li><a href="#" onclick="return false; samplez();">Sample z</a></li>
 <p id ="ugly" style = "display:none;">This is sample 3.</p>
</ul>
</body>
</html>

我的问题是，如果你点击任何链接，如何设置下拉视图的速度。

使用setTimeout。更多信息请点击此处：http://www.w3schools.com/jsref/met_win_settimeout.asp

html5动画可能会有所帮助，请查看更多或者，您可以使用setTimeout每隔1ms增加css的高度值（无论您喜欢什么）来制作动画。

var dropDown = function() {
  var ele = document.getElementById("xxx");    
  var h = ele.style.height;
  ele.style.height = parseInt(h.substring(0, h.length-2)) + 2 + "px";
  setTimeout(dropDown, 1);
};
setTimeout(dropDown, 1);
相关文章：