快捷導(dǎo)航

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

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

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

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

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

效果如圖：

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

實(shí)現(xiàn)思路：

1.布局：

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

布局右側(cè)的contentDiv.

布局如圖：

2.js控制optionDiv和navListUl

①.當(dāng)點(diǎn)擊optionDiv的時(shí)候添加本次是否點(diǎn)擊的in類(lèi)標(biāo)記，

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

③.當(dāng)前的optionDiv擁有active類(lèi)時(shí)移除active類(lèi)，沒(méi)有avtive類(lèi)時(shí)，添加active類(lèi)。

④.隱藏所有的navListUL

⑤.顯示類(lèi)為avtive的optionDiv下面的navListUL

⑥.移除optionDiv的時(shí)候添加本次是否點(diǎn)擊的in類(lèi)標(biāo)記，

實(shí)現(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");
  //對(duì)不是類(lèi)class為in的元素移除active類(lèi)
  $(".option_title").not(".in").removeClass("active");
  //多次點(diǎn)擊設(shè)置改元素的類(lèi)為active或不是active
  $(this).toggleClass("active");
  //以滑動(dòng)方式隱藏所有l(wèi)ist
  $(".nav-list").slideUp();
  //以滑動(dòng)方式顯示元素
  $(".active").next().slideDown();
  //移除選中optionDiv的in類(lèi)
  $(this).removeClass("in");
});

PS：感興趣的朋友可以使用如下在線(xiàn)工具測(cè)試上述代碼：

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

在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：
http://tools.jb51.net/code/HtmlJsRun

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

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

您可能感興趣的文章: