信鸽网

JS+CSS实现的简单折叠展开多级菜单效果

  作者：bea

本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下： 这是一款JS+CSS实现的多级折叠菜单，可折叠展开/合拢，没有引用任何的外部文件，也没有用到图片，虽然简单，而且还有些粗糙，但核心的东西已经展示给大家了，正在研究折叠菜单的朋友们，这一个小例子可能正是你需要的，好好研究一下吧。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-css-simple-zdzk-menu-style-codes/ 具体

本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下：


这是一款JS+CSS实现的多级折叠菜单，可折叠展开/合拢，没有引用任何的外部文件，也没有用到图片，虽然简单，而且还有些粗糙，但核心的东西已经展示给大家了，正在研究折叠菜单的朋友们，这一个小例子可能正是你需要的，好好研究一下吧。


运行效果截图如下：



在线演示地址如下：


http://demo./js/2015/js-css-simple-zdzk-menu-style-codes/


具体代码如下：




<!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>

<title>折叠菜单</title>

<style>

#side_nav ul{display:none}

</style>

</head>

<body>

<ul id="side_nav">

 <li><span>菜单1</span>

  <ul>

   <li><a href="#">菜单1-0</a></li>

   <li><a href="#">菜单1-1</a></li>

  </ul>

 </li>

 <li><span>菜单2</span>

  <ul>

   <li><a href="#">菜单2-0</a></li>

   <li><a href="#">菜单2-1</a></li>

  </ul>

 </li>

 <li><span>菜单3</span>

  <ul>

   <li><a href="#">菜单3-0</a></li>

  </ul>

 </li>

</ul>

<script type="text/javascript">

<!--

 (function(){

  var navWrap=document.getElementById("side_nav");

  var nav1s=navWrap.getElementsByTagName("span");

  var nav2s=navWrap.getElementsByTagName("ul");

  for(var i=0,len=nav1s.length;i<len;i++){

   nav1s[i].onclick=(function(i){

    return function(){

     for(var j=0;j<len;j++){

      nav2s[j].style.display="none";

     }

     nav2s[i].style.display="block";

    }

   })(i)

  }

 })()

//-->

</script>

</body>

</html>


希望本文所述对大家的JavaScript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: