QQ菜单案例,点击展开再次点击关闭(类似手风琴效果)

Posted 麦兜家园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了QQ菜单案例,点击展开再次点击关闭(类似手风琴效果)相关的知识,希望对你有一定的参考价值。

模仿一下qq的好友展示效果,点击好友标题,下民饿好友列表展示出来,而点击其中的一个好友,给其加上一个点击的效果样式,当然再次点击标题,可以将其关闭。

说的可能不是很清楚,先来看一下布局,就明白想要的效果了,来看布局代码:

 1 <ul id="list">
 2     <li class="lis">
 3         <h2>我的好友</h2>
 4         <ul>
 5             <li>张三</li>
 6             <li>张三</li>
 7             <li>张三</li>
 8             <li>张三</li>
 9         </ul>
10     </li>
11     <li class="lis">
12         <h2>企业好友</h2>
13         <ul>
14             <li>李四</li>
15             <li>李四</li>
16             <li>李四</li>
17             <li>李四</li>
18             <li>李四</li>
19         </ul>
20     </li>
21     <li class="lis">
22         <h2>黑名单</h2>
23         <ul>
24             <li>张小三</li>
25             <li>李小四</li>
26         </ul>
27     </li>
28 </ul>

css样式简单写一下:

 1 <style>
 2         ul , h2 { padding:0; margin:0; }
 3         li { list-style:none; }
 4         #list { width:240px; border:1px solid #e5e5e5; margin:0 auto; }
 5         #list .lis {}
 6         #list h2 { height:30px; line-height:30px; text-indent:20px;font-size:16px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; }
 7         #list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }
 8         #list ul { display:none; }
 9         #list ul li { line-height:24px; border-bottom:1px solid #e5e5e5; text-indent:24px; }
10         #list ul .hover { background:#6FF; }
11     </style>

未展开的效果是:

想要的效果是点击每一个标题可以让其的子列表展开,并且点击 每一个好友给其加上选中样式,如下图:

 

当然点击任何一个都能展开并且每一个子内容都有选中样式,并且其他的选中样式要清除,好的,来看分析一下js代码:

1、点击每一组的标题要展开,再次点击要关闭,那么就要首先找到这个标题然后依次去循环,并且判断点击展开再次点击关闭;

2、要找到每个组下面的子元素,那么同样也要先找到每个子元素然后再去循环每个子元素;

3、点击某一个子元素要加选中样式,相反点击其他的要清除当前的样式,那么就要用到每次先循环所有并清除所有,然后点击某一个添加。

大概分为这三个步骤,直接来看js代码:

 1 <script>
 2     window.onload= function(){
 3        var oList=document.getElementById("list");
 4        var oH2=oList.getElementsByTagName("h2");
 5        var oUl=oList.getElementsByTagName("ul");
 6         var arrLi=[];
 7         //找到h2然后循环
 8         for(var i=0;i<oH2.length;i++){
 9             oH2[i].index=i;
10             oH2[i].onclick=function(){
11                 //点击展开再次点击关闭的判断
12                 if(this.className==""){
13                     oUl[this.index].style.display="block";
14                     this.className="active";
15                 }else{
16                     oUl[this.index].style.display="none";
17                     this.className="";
18                 }
19 
20             }
21         }
22         //这里要找到每个组下面的ul里面的li
23         for(var i=0;i<oUl.length;i++){
24             var aLi=oUl[i].getElementsByTagName("li");
25             for(var j=0;j<aLi.length;j++){
26                 arrLi.push(aLi[j]) ;//因为要操作的li比较多,那么可以把它push到一个数组里再进行点击操作
27             }
28         }
29        
30         for(var i=0;i<arrLi.length;i++){ //这里先循环每一个分组里的子元素li
31             arrLi[i].onclick=function(){ //然后去点击当前子元素li添加选中样式
32                 //那么就每次进来采用先清空,然后点击哪一个添加哪一个
33                 for(var i=0;i<arrLi.length;i++){
34                     arrLi[i].className="";
35                 }
36                 this.className="hover";
37 
38             }
39         }
40     }
41 </script>

好了,就是这样了,其实今天的重点还是索引值,要明白什么时候是点击到当前的元素!今天就到这里了,加油!

 

以上是关于QQ菜单案例,点击展开再次点击关闭(类似手风琴效果)的主要内容,如果未能解决你的问题,请参考以下文章

Extjs 手风琴动态关闭所有面板

ListView之点击展开菜单

WordPress用JavaScript和CSS实现二级菜单展开手风琴效果

js 手风琴菜单折叠要用到列表浮动吗

Antd table的expandedRowRender额外展开行以及注意事项

如何在Angular 4中关闭手风琴内的所有菜单