请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 注册 找回密码

html5源码-html5教程网


查看: 29022|回复: 15

html5 手风琴菜单

[复制链接]

1

主题

0

听众

48

积分

新手上路

Rank: 1

贡献
0
金钱
1
发表于 2016-10-29 00:14:14 |显示全部楼层
因为项目需要,现在需要做个手风琴菜单,于是自己就瞎整了一下,所用只是less.js  javascript  jquery效果如图:
具体代码如下:
<!DOCTYPE html>

<html>
  <head>
   <title></title>
   <style type="text/less">
         
     .list{
         list-style-image: url(../images/shang.png);
         background:#E0E0E0;
         line-height:2em         
     }
     
      .list1{
         list-style-type:none;
         background:#E0E0E0;
         line-height:2em         
     }
     
     .liBox{
       .list1;
       .listbox{
         .list;
         .div1{
           margin-left:20px
         }
       }
     }  
   </style>

  </head>
  <body>
     <div>
       <ul>
          <li id="liBox" class="liBox">
            <ul>
             <li  id="listbox" class="listbox" >测试</li>
             <div id="box" class="box" hidden>
                <div>这是一个测试1</div>
                <div>这是一个测试2</div>
                <div>这是一个测试3</div>
                <div>这是一个测试4</div>
                <div>这是一个测试5</div>
                <div>这是一个测试6</div>
             </div>
            
               <div hidden>
                  <li id="listboxC" class="listbox">测试101</li>
                    <div hidden>
                       <div>这是一个测试1010</div>
                       <div>这是一个测试1011</div>
                       <div>这是一个测试1012</div>
                       <div>这是一个测试1013</div>
                       <div>这是一个测试1014</div>
                    </div>
               </div>
            </ul>
          </li>
            

           <li id="liBox1" class="liBox">
            <ul>
             <li  id="listbox1" class="listbox">测试1</li>
             <div id="box" class="box" hidden>
                <div>这是一个测试7</div>
                <div>这是一个测试8</div>
                <div>这是一个测试9</div>
                <div>这是一个测试10</div>
                <div>这是一个测试11</div>
                <div>这是一个测试12</div>
             </div>
            </ul>
          </li>
         
           <li id="liBox2" class="liBox">
            <ul>
             <li  id="listbox2" class="listbox">测试2</li>
             <div id="box" class="box" hidden>
                <div>这是一个测试13</div>
                <div>这是一个测试14</div>
                <div>这是一个测试15</div>
                <div>这是一个测试16</div>
                <div>这是一个测试17</div>
                <div>这是一个测试18</div>
             </div>
            </ul>
          </li>
         
           <li id="liBox3" class="liBox">
            <ul>
             <li id="listbox3" class="listbox">测试3</li>
             <div id="box" class="box" hidden>
                <div>这是一个测试19</div>
                <div>这是一个测试20</div>
                <div>这是一个测试21</div>
                <div>这是一个测试22</div>
                <div>这是一个测试23</div>
                <div>这是一个测试24</div>
             </div>
            </ul>
          </li>
         </ul>
  </body>
</html>

  
    <script language="JavaScript" type="text/JavaScript" src="../bootstrap/js/less.min.js"></script>
   <script language="JavaScript" type="text/JavaScript" src="../bootstrap/js/jquery.min.js"></script>
  <script type="text/javascript">
      
     function toggleClick(evl){
         $("#"+evl.id).nextAll().toggle();
            if($("#"+evl.id).nextAll().is(":hidden")){
            document.getElementById(evl.id).style.listStyleImage="url(../images/shang.png)";
            } else{
             if($(evl).attr("class")=="listbox"){
                 document.getElementById(evl.id).style.listStyleImage="url(../images/xia.png)";
             }
            }
     }
     function test(evl){
        alert(evl.innerText);
     }
  </script>

一开始不想写的,但是想了一下还是随便的写一下吧。在代码的简化上也许还存在一些问题。因为我项目中是动态加载的数据,所以也就没改正。请各位包含。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-10-29 00:15:05 |显示全部楼层
是爷们的娘们的都帮顶!大力支持
回复

使用道具 举报

0

主题

0

听众

22

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-10-29 20:40:02 |显示全部楼层
占坑编辑ing
回复

使用道具 举报

0

主题

0

听众

21

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-1 02:59:27 |显示全部楼层
好工具,都用的着,支持楼主
回复

使用道具 举报

1

主题

0

听众

47

积分

新手上路

Rank: 1

贡献
0
金钱
1
发表于 2016-11-3 14:41:40 |显示全部楼层
不错 支持一个了
回复

使用道具 举报

0

主题

0

听众

29

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-4 07:46:19 |显示全部楼层
路过 帮顶 嘿嘿
回复

使用道具 举报

0

主题

0

听众

49

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-5 04:13:21 |显示全部楼层
占坑编辑ing
回复

使用道具 举报

0

主题

0

听众

8

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-7 19:02:44 |显示全部楼层
边撸边过
回复

使用道具 举报

4

主题

0

听众

50

积分

注册会员

Rank: 2

贡献
0
金钱
3
发表于 2016-11-8 20:44:15 |显示全部楼层
好帖必须得顶起
回复

使用道具 举报

0

主题

0

听众

21

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-11-9 17:04:37 |显示全部楼层
实用贴,支持下
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆



Archiver|手机版|     

HTML5教程网 Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部