因为项目需要，现在需要做个手风琴菜单，于是自己就瞎整了一下，所用只是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" onclick="toggleClick(this)" >测试</li>
             <div id="box" class="box" hidden>
                <div onclick="test(this)">这是一个测试1</div>
                <div onclick="test(this)">这是一个测试2</div>
                <div onclick="test(this)">这是一个测试3</div>
                <div onclick="test(this)">这是一个测试4</div>
                <div onclick="test(this)">这是一个测试5</div>
                <div onclick="test(this)">这是一个测试6</div>
             </div>
            
               <div hidden>
                  <li id="listboxC" class="listbox" onclick="toggleClick(this)">测试101</li>
                    <div hidden>
                       <div onclick="test(this)">这是一个测试1010</div>
                       <div onclick="test(this)">这是一个测试1011</div>
                       <div onclick="test(this)">这是一个测试1012</div>
                       <div onclick="test(this)">这是一个测试1013</div>
                       <div onclick="test(this)">这是一个测试1014</div>
                    </div>
               </div>
            </ul>
          </li>

<li id="liBox1" class="liBox">
            <ul>
             <li  id="listbox1" class="listbox" onclick="toggleClick(this)">测试1</li>
             <div id="box" class="box" hidden>
                <div onclick="test(this)">这是一个测试7</div>
                <div onclick="test(this)">这是一个测试8</div>
                <div onclick="test(this)">这是一个测试9</div>
                <div onclick="test(this)">这是一个测试10</div>
                <div onclick="test(this)">这是一个测试11</div>
                <div onclick="test(this)">这是一个测试12</div>
             </div>
            </ul>
          </li>
          
           <li id="liBox2" class="liBox">
            <ul>
             <li  id="listbox2" class="listbox" onclick="toggleClick(this)">测试2</li>
             <div id="box" class="box" hidden>
                <div onclick="test(this)">这是一个测试13</div>
                <div onclick="test(this)">这是一个测试14</div>
                <div onclick="test(this)">这是一个测试15</div>
                <div onclick="test(this)">这是一个测试16</div>
                <div onclick="test(this)">这是一个测试17</div>
                <div onclick="test(this)">这是一个测试18</div>
             </div>
            </ul>
          </li>
          
           <li id="liBox3" class="liBox">
            <ul>
             <li id="listbox3" class="listbox" onclick="toggleClick(this)">测试3</li>
             <div id="box" class="box" hidden>
                <div onclick="test(this)">这是一个测试19</div>
                <div onclick="test(this)">这是一个测试20</div>
                <div onclick="test(this)">这是一个测试21</div>
                <div onclick="test(this)">这是一个测试22</div>
                <div onclick="test(this)">这是一个测试23</div>
                <div onclick="test(this)">这是一个测试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>

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

html5 手风琴菜单的更多相关文章

  1. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  2. 精选10款超酷的HTML5/CSS3菜单

    今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...

  3. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  4. UIKit的手风琴菜单，单条展开和多条同时展开

    这个也要进来看看哈. 记得加多个属性时的用法就可以了. 因为官网提供太多的SAPMLE啦.. http://www.getuikit.net/docs/accordion.html <div c ...

  5. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  6. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  7. 如何用Mockplus快速做一个手风琴菜单？

    手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器.即使是功能强大的Axure,想实现该效果也比较麻烦.但如果你对Mockplus有所了解,你一定知道,利用Mockplus的 ...

  8. 炫酷实用的CSS3代码垂直手风琴菜单

    今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head> ...

  9. Jquery UI accordion手风琴菜单

    最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> ...

随机推荐

  1. HTML 提高页面加载速度的方法

    (1)减少 HTTP 的请求.(合并资源文件 和 使用图片精灵 : (2)把CSS  放头部,把 JavaScript 放到 body 标签尾部: (3)定义图片的宽和高: (4)定义字符集: (5) ...

  2. .NET开源工作流RoadFlow-表单设计-子表

    子表即明细表 从表:与主表对应在子表. 从表主键:从表的主键. 主表字段:主表中与从来关联的字段,一般为主表的主键. 与主表关联字段:从表中与主表关联的字段. 选择之后即可在下面从表字段列表中设置每个 ...

  3. 【阿里云产品公测】性能测试服务PTS初体验

    作者:阿里云用户装甲兵 第一步,在九大产品免费公测 页面,点击性能测试服务PTS的申请公测按钮: 点击申请公测后,正确填写个人信息,免费申请性能测试服务PTS: 填写完成后,点击申请提交,耐心等待,一 ...

  4. CAA介绍（转）

    CAA是DS公司正对于其一系列产品,eg:CATIA,ENOVIA,DELIMA,etc,进行二次开发的一个环境.与VC结合的比较紧密.CAAV4是用于Unix/Linux的,到CAAV5才移植到Wi ...

  5. ZOJ 3379 Master Spark

    计算出中轴能覆盖到某个点的极角范围,最大覆盖次数即是答案. 首先把中轴和点重合,此时中轴的角度为theta = atan(y/x), 然后以原点为圆心旋转点和抛物线相交求出之间的夹角, 把x = a* ...

  6. Android（java）学习笔记2：继承Thread类创建线程类

    1. 继承Thread类 创建线程类: package cn.itcast_02; /* * 该类要重写run()方法,为什么呢? * 不是类中的所有代码都需要被线程执行的. * 而这个时候,为了区分 ...

  7. CryptoSwift：密码学

    Hash (Digest) MD5 | SHA1 | SHA224 | SHA256 | SHA384 | SHA512 | SHA3 Cyclic Redundancy Check (CRC) CR ...

  8. 贪心算法，今年暑假不AC

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2037 活动安排问题,可用贪心. 1.把活动按结束时间递增排序. 2.直观上,选择相对活动为未安排活动留 ...

  9. ACM-ICPC 2018 徐州赛区网络预赛 A.Hard to prepare 【规律递推】

    任意门:https://nanti.jisuanke.com/t/31453 A.Hard to prepare After Incident, a feast is usually held in ...

  10. 随便扯扯React生命周期 --《爱看不看系列》

    生命周期嘛,顾名思义,就是说组件这辈子从生下来到死掉经历的事情.先来看看一张图片,温故温故,如图: 你会发现有些周期的名字都能找出点规律,我找到的规律是凡是 Will 字母的,表示该钩子函数会在该生命 ...