真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

使用jQuery怎么隱藏與顯示側(cè)邊欄

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)使用jQuery怎么隱藏與顯示側(cè)邊欄，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、綏江ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學管理、有技術(shù)的綏江網(wǎng)站制作公司

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

實現(xiàn)思路：

1.布局：

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

布局右側(cè)的contentDiv.

布局如圖：

使用jQuery怎么隱藏與顯示側(cè)邊欄

2.js控制optionDiv和navListUl

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

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

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

④.隱藏所有的navListUL

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

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

實現(xiàn)代碼：

html：


  
    本周食譜

周一食譜周二食譜周三食譜周四食譜周五食譜周六食譜周日食譜下周食譜

周一食譜周二食譜周三食譜周四食譜周五食譜周六食譜周日食譜

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"); });

上述就是小編為大家分享的使用jQuery怎么隱藏與顯示側(cè)邊欄了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

http://weahome.cn/article/gjjspo.html