jquery垂直アコーディオンナビゲーションバーを実現します。

2595 ワード

jquery アコーデオンナビゲーションバー

本論文の例では、jqueryが垂直アコーディオンナビゲーションバーを実現するための具体的なコードを共有しています。

プロジェクトをする時、初めて垂直のアコーディオンナビゲーションバーを作って記録しました。

jQueryを使うほうが簡単です。

拡張ブラウザサポートこの例はjQuery 1.12.4版を採用します。

フロントエンドHTML:


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="./jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="middl">
 <ul class="nav">
 <li>    
  <ul class="sub">
  <li>    </li>
  </ul>
 </li>
 <li>    
  <ul class="sub">
  <li>>    </li>
  <li>>    </li>
  </ul>
 </li>
 <li>    
  <ul class="sub">
  <li>>    </li>
  </ul>
 </li>
 </ul>
 </div>
 </body>
</html>

CSSスタイル:


.middl {
 width: 100%;
 height: auto;
 background-color: #ADD8E6;
}

.nav {
 list-style: none;
 width: 100%;
}

.nav>li {
 width: 100%;
 height: auto;
 font-size: 24px;
 text-indent: 1em; /*  1   */
 position: relative;
 background-color: #ADD8E6;
 color: #f8f8ff;
 cursor: pointer;
}
/*         */
.sub {
 display: none; 
}

.sub>li {
 list-style: none; /*     */
 width: 100%;
 height: 50px;
 line-height: 50px;
 font-size: 24px;
 text-indent: 2em; /*  2   */
 background-color: #e6e6fa;
 color: #000;
 cursor: pointer; /*    */
}

jQueryを導入:


$(function () {
 //          
 //1.           
 $(".nav>li").click(function () {
  //1.1      
  var $sub = $(this).children(".sub");
  //1.2       
  $sub.slideDown(500);
  //1.3            
  //var otherSub = $(this).siblings().children(".sub");
  ////1.4             
  //otherSub.slideUp(500);
 });

 //          
 $(".nav>li").dblclick(function () {
  var $sub = $(this).children(".sub");
  $sub.slideUp(500);
 })
});

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

Linuxは一般ユーザーのスッとrootの解決方法を禁止します。

Linuxの中のbz 2圧縮フォーマットの実例は詳しく説明します。