So verwenden Sie JS, um eine Liste zu erweitern, zu verkleinern und zu erweitern-js-Tutorial-php.cn

So verwenden Sie JS, um eine Liste zu erweitern, zu verkleinern und zu erweitern

php中世界最好的语言

Freigeben： 2017-12-30 17:44:19

Original

2376 Leute haben es durchsucht

Was ich Ihnen dieses Mal zeige, ist, wie Sie mit JS eine Listenerweiterungs- und -kontraktionsfunktion erstellen. Dieser Artikel gibt Ihnen eine detaillierte Analyse.

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Über HTTP/2-Server-Push

Verwenden von jQuery zum Deduplizieren und Sortieren von Arrays. Betrieb

So verwenden Sie JS, um per Klick zum angemeldeten persönlichen Postfach zu springen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS, um eine Liste zu erweitern, zu verkleinern und zu erweitern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!