コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > アコーディオンメニュー

アコーディオンメニュー

高洛峰
リリース： 2016-10-29 10:30:20
オリジナル
1491 人が閲覧しました

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>
ログイン後にコピー


関連ラベル：
アコーディオン
ソース：php.cn
前の記事：Metro-UI システム-1-タイル ラベル 次の記事：Float プロパティの深い理解と応用
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート