Melipat mudah dan mengembangkan kesan menu berbilang peringkat yang dilaksanakan oleh kemahiran JS CSS

Melipat mudah dan mengembangkan kesan menu berbilang peringkat yang dilaksanakan oleh kemahiran JS CSS_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2016-05-16 15:39:46

asal

1908 orang telah melayarinya

Contoh dalam artikel ini menerangkan kesan menu berbilang peringkat yang boleh dilipat dan dikembangkan yang dilaksanakan oleh JS CSS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu lipatan berbilang peringkat yang dilaksanakan dalam JS CSS, yang boleh dilipat, dikembangkan atau diruntuhkan. Ia tidak merujuk mana-mana fail luaran dan tidak menggunakan imej Walaupun ia ringkas dan agak kasar perkara telah ditunjukkan kepada anda Semua orang, rakan-rakan yang sedang mengkaji menu runtuh, contoh kecil ini mungkin hanya apa yang anda perlukan, kaji dengan teliti.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.