jQuery實現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解

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

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

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

web項目中經(jīng)常會出現(xiàn)左側(cè)側(cè)邊欄，右側(cè)顯示內(nèi)容的web頁面。

效果如圖：

如何實現(xiàn)點擊本周食譜，本周食譜的列表隱藏或顯示切換，并關(guān)閉下周食譜列表顯示，點擊下周食譜，讓下周食譜的列表隱藏切換顯示，并關(guān)閉本周食譜列表顯示

實現(xiàn)思路：

1.布局：

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

布局右側(cè)的contentDiv.

布局如圖：

2.js控制optionDiv和navListUl

①.當(dāng)點擊optionDiv的時候添加本次是否點擊的in類標(biāo)記，

②.移除其他optionDiv的active類標(biāo)記，

③.當(dāng)前的optionDiv擁有active類時移除active類，沒有avtive類時，添加active類。

④.隱藏所有的navListUL

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

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

實現(xiàn)代碼：

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：

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

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

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

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

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

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

您可能感興趣的文章: