2顶

点击弹出导航菜单下拉列表

稿源：互联网 2022-06-28 03:19:45 点击： 4559 撤稿纠错

单击后弹出该项所包含的下拉菜单项，有点像QQ点击弹出列表效果。

以下讨论的是和相关的点击弹出导航菜单下拉列表教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>点击弹出下拉列表效果，sky整理收集。</title>
<style type="text/css">
body{
 margin:10px;
 padding:10px;
}
body,td,div,span,li{
 font-size:12px;
}
.title01,.title02{
 color:#fff;
 font-weight:bold;
}
#DoorP{
 border:12px solid #eee;
 width:150px;
 height:300px;
 padding:4px;
 background:#fff;
}
.title01{
 width:100%;
 height:25px;
 background:#00ccff;
 cursor:pointer;
}
.title02{
 width:100%;
 height:25px;
 background:#99cc00;
 cursor:pointer;
}
.content{
 background:#eee;
 border-bottom:2px solid #fff;
 overflow:hidden;
 color:#666;
 padding-left:4px;
 padding-right:4px;
 line-height:18px;
}
</style>

</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="DoorP">
 <table>
  <tr>
   <td>
    站长特效网
   </td>
  </tr>
 </table>
 <div class="content">
  zzjs

网页特效

广告代码

</div>
 <table>
  <tr>
   <td>
    第二层信息
   </td>
  </tr>
 </table>
 <div class="content">
  ThirdteenDevil
 </div>
 <table>
  <tr>
   <td>
    第三层信息
   </td>
  </tr>
 </table>
 <div class="content">
  devil13th
 </div>
</div>
<script type="text/javascript">
 var open = 2;// 设置初始打开的层序号
 var openState = new Array();
 var closeState = new Array();
 var dH = 220;
 function $(id){
  if(document.getElementById(id))
  {
   return document.getElementById(id);
  }
  else
  {//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
   alert("没有找到!");
  }
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 function $tag(id,tagName){
  return $(id).getElementsByTagName(tagName)
 }
 function closeMe(Cid,Oid){
  var h = parseInt(Ds[Cid].style.height);
  //alert(h);
  if(h > 0)
  {
   h = h - Math.ceil(h/3);
   Ds[Cid].style.height = h+"px";
  }
  else
  {
   openMe(Oid);
   clearTimeout(closeState[Cid]);
   return false;
  }
  closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");
 }
 function openMe(Oid){
  var h = parseInt(Ds[Oid].style.height);
  //alert(h);
  if(h < dH)
  {
   h = h + Math.ceil((dH-h)/3);
   Ds[Oid].style.height = h+"px";
  }
  else
  {
   clearTimeout(openState[Oid]);
   return false;
  }
  openState[Oid] = setTimeout("openMe("+Oid+")");
 }
 var Ds = $tag("DoorP","div");
 var Ts = $tag("DoorP","table");
 if(Ds.length != Ts.length)
 {
  alert("标题和内容数目不相同!");
 }
 for(var i = 0 ; i < Ds.length ; i++)
 {
  if(i==open)
  {
   Ds[i].style.height = dH+"px";
   Ts[i].className="title01";
  }
  else
  {
   Ds[i].style.height = "0px";
   Ts[i].className="title02";
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  Ts[i].value = i;
  Ts[i].onclick = function(){
   if(open==this.value)
   {
    return false;
   }
   Ts[open].className="title02";
   Ts[this.value].className="title01";
   for(var i = 0 ; i < openState.length ; i++)
   {
    clearTimeout(openState[i]);
    clearTimeout(closeState[i]);
   }
   closeMe(open,this.value);
   //openMe(this.value);
   open = this.value;
  }
 } //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 //直接打开层函数
 function showDiv(id){
  Ds[id].style.height=dH+"px";
  Ds[open].style.height="0px";
  open = id;
 }
 //渐渐打开层函数
</script>
</body>
</html>

关于点击弹出导航菜单下拉列表的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016327862650.shtml方便下次再访问哦。

·上一篇： 样式随机显示效果
·下一篇： 关联菜单效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

点击弹出导航菜单下拉列表

文章分类LIST >>返回首页

最新游戏

最新新闻