Exemple de JavaScript implémentant les fonctions d'expansion, de contraction et d'expansion de liste QQ-js tutoriel-php.cn

Exemple de JavaScript implémentant les fonctions d'expansion, de contraction et d'expansion de liste QQ

黄舟

Libérer： 2017-10-31 09:49:43

original

1882 Les gens l'ont consulté

L'exemple de cet article partage avec vous le code spécifique de js pour implémenter l'expansion, la contraction et l'affichage de l'expansion de la liste QQ pour votre référence. Le contenu spécifique est le suivant

Rendu :

Code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,h2{margin:0; padding:0;}
li{list-style-type:none;}
#list{margin:0 auto; border:#333 solid 1px; width:250px;}
#list h2 {background: url(../img/ico1.gif) no-repeat 5px 14px #0C6; text-indent:20px; height:32px; line-height:32px;}
#list ul li{text-indent:25px; border-bottom:#333 solid 1px; line-height:24px; height:23px; }
#list .active{background: url(../img/ico2.gif) no-repeat 5px 14px #693; text-indent:20px; height:30px; line-height:30px;}
#list ul{display:none;}
.hover{background:#CFC;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById("list");
var aUl =oUl.getElementsByTagName("ul");
var aH2 = oUl.getElementsByTagName("h2");
var aLi = null;
var arrLi = [];
var that = null;
for(i=0;i<aH2.length;i++){
 aH2[i].index = i;
 aH2[i].onclick = function(){
 if(this.className==&#39;&#39;){
 for(i=0;i<aH2.length;i++){
aH2[i].className=&#39;&#39;;
aUl[i].style.display=&#39;none&#39;;
 }
this.className=&#39;active&#39;;
aUl[this.index].style.display = &#39;block&#39;;
}else{
this.className=&#39;&#39;;
aUl[this.index].style.display=&#39;none&#39;;
 }
             }
 }
for(i=0;i<aUl.length;i++){
  aLi =aUl[i].getElementsByTagName("li");
 for(j=0;j<aLi.length;j++){
  arrLi.push(aLi[j]);
 }
}
for(var i=0;i<arrLi.length;i++){
 arrLi[i].onclick = function(){
  for(i=0; i<arrLi.length;i++){ 
arrLi[i].className=&#39;&#39;;
 }
this.className = &#39;hover&#39;;
}
}

};
</script>
</head>


<body>
<ul id="list">
<li class="lis">
  <h2>我的好友</h2>
  <ul>
  <li>张三</li>
   <li>张四</li>
   <li>张五</li>
   <li>张六</li>
  </ul>
 </li>
 <li class="lis">
 <h2>企业好友</h2>
  <ul>
  <li>李四</li>
   <li>李小四</li>
   <li>李四二</li>
   <li>李毅</li>
   <li>李二</li>
  </ul>
 </li>
 <li class="lis">
 <h2>黑名单</h2>
  <ul>
  <li>张三</li>
  <li>李四</li>
  </ul>
 </li>
</ul>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!