jQuery實現側邊欄隱藏與顯示的方法詳解

更新時間：2018年12月22日 12:01:10 作者：kerryqpw

這篇文章主要介紹了jQuery實現側邊欄隱藏與顯示的方法,結合實例形式較為詳細的分析了jQuery基于事件響應與頁面元素屬性動態(tài)操作實現元素顯示與隱藏功能的相關操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現側邊欄隱藏與顯示的方法。分享給大家供大家參考，具體如下：

web項目中經常會出現左側側邊欄，右側顯示內容的web頁面。

效果如圖：

如何實現點擊本周食譜，本周食譜的列表隱藏或顯示切換，并關閉下周食譜列表顯示，點擊下周食譜，讓下周食譜的列表隱藏切換顯示，并關閉本周食譜列表顯示

實現思路：

1.布局：

布局頂部的topDiv，左側的leftDiv(optionDiv，navListUl)，

布局右側的contentDiv.

布局如圖：

2.js控制optionDiv和navListUl

①.當點擊optionDiv的時候添加本次是否點擊的in類標記，

②.移除其他optionDiv的active類標記，

③.當前的optionDiv擁有active類時移除active類，沒有avtive類時，添加active類。

④.隱藏所有的navListUL

⑤.顯示類為avtive的optionDiv下面的navListUL

⑥.移除optionDiv的時候添加本次是否點擊的in類標記，

實現代碼：

html：

<div class="left_option">
  <div class="option_title active">
    本周食譜
  </div>
  <ul class="this_week nav-list">
    <li style="color:#ED6168" date-id="1" class="weekDate">周一食譜</li>
    <li class="weekDate" date-id="2">周二食譜</li>
    <li class="weekDate" date-id="3">周三食譜</li>
    <li class="weekDate" date-id="4">周四食譜</li>
    <li class="weekDate" date-id="5">周五食譜</li>
    <li class="weekDate" date-id="6">周六食譜</li>
    <li class="weekDate" date-id="7">周日食譜</li>
  </ul>
  <div class="option_title">
    下周食譜
  </div>
  <ul class="next_week nav-list" style="display:none">
    <li date-id="1" class="weekDate2">周一食譜</li>
    <li class="weekDate2" date-id="2">周二食譜</li>
    <li class="weekDate2" date-id="3">周三食譜</li>
    <li class="weekDate2" date-id="4">周四食譜</li>
    <li class="weekDate2" date-id="5">周五食譜</li>
    <li class="weekDate2" date-id="6">周六食譜</li>
    <li class="weekDate2" date-id="7">周日食譜</li>
  </ul>
</div>

js：

//控制側邊欄的顯示與隱藏
$(".option_title").click(function(){
  $(this).addClass("in");
  //對不是類class為in的元素移除active類
  $(".option_title").not(".in").removeClass("active");
  //多次點擊設置改元素的類為active或不是active
  $(this).toggleClass("active");
  //以滑動方式隱藏所有l(wèi)ist
  $(".nav-list").slideUp();
  //以滑動方式顯示元素
  $(".active").next().slideDown();
  //移除選中optionDiv的in類
  $(this).removeClass("in");
});

PS：感興趣的朋友可以使用如下在線工具測試上述代碼：

在線HTML/CSS/JavaScript前端代碼調試運行工具：
http://tools.jb51.net/code/WebCodeRun

在線HTML/CSS/JavaScript代碼運行工具：
http://tools.jb51.net/code/HtmlJsRun

更多關于jQuery相關內容還可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章: