溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
效果圖如下所示：
html:
<ul id="list"> <li class="lis"> <h3>我的好友</h3> <ul> <li>張三</li> <li>李四</li> ... </ul> </li> <li class="lis"> <h3>企業好友</h3> <ul> <li>小明</li> <li>小紅</li> ... </ul> </li> <li class="lis"> <h3>黑名單</h3> <ul> <li>哈哈</li> ... </ul> </li> </ul>
css：
ul,h3 {padding: 0;margin: 0;}
li {list-style: none;}
#list {
width: 240px;
border: 1px solid #ccc;
margin: 0 auto;
}
#list .lis { }
#list h3 {
height: 30px;
line-height: 30px;
text-indent: 20px;/*文字縮進20px*/
background: url(img/ico1.gif) no-repeat 5px center pink;/*前面小箭頭*/
cursor: pointer;
}
#list .active { /* 點擊時添加的類名 */
background: url(img/ico2.gif) no-repeat 5px center #ff9;
}
#list ul {display: none;}
#list ul li {
line-height: 24px;
border-bottom: 2px solid #fc4;
text-indent: 24px;/*文字縮進24px*/
}
js：
window.onload = function(){
var list = document.getElementById('list');
var ah3 = list.getElementsByTagName('h3');
var uls = list.getElementsByTagName('ul');
// h3要和下面的ul進行匹配，所以我們要用索引值，給h3身上添加索引值
for(var i=0;i<ah3.length;i++){
ah3[i].index = i;//給h3添加索引值，點擊誰就給誰添加索引值
ah3[i].onclick = function(){
if(this.className == ''){//判斷所點擊的h3標簽是否有類，
//this.index指h3身上的索引數，this指h3，h3的索引值為this.index
uls[this.index].style.display = 'block';
this.className = 'active';//給當前點擊的h3添加類，更改箭頭方向
}else{
uls[this.index].style.display = 'none';
this.className = '';
}
}
}
}
下篇給大家介紹：JS仿QQ好友列表展開、收縮功能(第二篇)
以上所述是小編給大家介紹的JS仿QQ好友列表展開、收縮功能(第一篇)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
