cari

Rumah >hujung hadapan web >tutorial js >Melipat mudah dan mengembangkan kesan menu berbilang peringkat yang dilaksanakan oleh kemahiran JS CSS_javascript

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
2016-05-16 15:39:461895semak imbas

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>

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kemahiran Perkongsian Kod Loteri Roulette Mudah Alih_JavascriptArtikel seterusnya：Kemahiran Perkongsian Kod Loteri Roulette Mudah Alih_Javascript

Artikel berkaitan

Lihat lagi