首頁  >  文章  >  web前端  >  手風琴選單

手風琴選單

高洛峰
高洛峰原創
2016-10-29 10:30:201478瀏覽

html5 手风琴菜单

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>


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn