Question

首先，我使用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>

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

Answer 1

html5动画可能会有所帮助，check more 或者，你可以使用 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);

Answer 2

使用setTimeout。更多信息：http://www.w3schools.com/jsref/met_win_settimeout.asp

如何设置下拉菜单的速度？

2 个答案: