這篇文章主要介紹“Jquery怎么實現(xiàn)更多選項的功能”,在日常操作中,相信很多人在Jquery怎么實現(xiàn)更多選項的功能問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Jquery怎么實現(xiàn)更多選項的功能”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
十年的七臺河網站建設經驗,針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。網絡營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同,自動調整七臺河建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現(xiàn)優(yōu)雅布局與設計,從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“七臺河網站設計”,“七臺河網站推廣”以來,每個客戶項目都認真落實執(zhí)行。篩選功能如圖:
這里只實現(xiàn)以下兩個功能
更多選項。點擊切換收起選項。
點擊條目在上面顯示已點擊條目。
首先是Html代碼:這里主要的代碼是:
<div class="SubCategoryBox"> <div class="mt"><span>筆記本</span><div></div></div> <div class="attr"> <span>品牌:</span> <div class="ul_list"> <ul id="pingpai"> <li><a href="#">聯(lián)想</a></li> <li><a href="#">索尼</a></li> <li><a href="#">三星</a></li> <li><a href="#">尼康</a></li> <li><a href="#">松下</a></li> <li><a href="#">卡西歐</a></li> <li><a href="#">富士</a></li> <li><a href="#">柯達</a></li> <li><a href="#">賓得</a></li> <li><a href="#">理光</a></li> <li><a href="#">奧林巴斯</a></li> <li><a href="#">明基</a></li> <li><a href="#">愛國者</a></li> <li><a href="#">AAA</a></li> <li><a href="#">明基</a></li> <li><a href="#">愛國者</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">明基</a></li> <li><a href="#">愛國者</a></li> <li><a href="#">其它</a></li> </ul> </div> </div> <div class="attr"> <span>價格:</span> <div class="ul_list"> <ul id="price"> <li><a href="#">0-1000</a></li> <li><a href="#">1001-2000</a></li> <li><a href="#">2001-3000</a></li> <li><a href="#">3000-~</a></li> </ul> </div> </div> <div class="attr"> <span>尺寸:</span> <div class="ul_list"> <ul id="chicun"> <li><a href="#">14</a></li> <li><a href="#">15.6</a></li> <li><a href="#">21</a></li> <li><a href="#">29</a></li> </ul> </div> </div> <div class="attr"> <span>觸控:</span> <div class="ul_list"> <ul id="chukong"> <li><a href="#">普通觸控</a></li> <li><a href="#">PC平板二合一</a></li> <li><a href="#">非觸控</a></li> </ul> </div> </div> <div class="attr"> <span>處理器:</span> <div class="ul_list"> <ul id="cpu"> <li><a href="#">Intel i3</a></li> <li><a href="#">Intel i5</a></li> <li><a href="#">Intel i7</a></li> <li><a href="#">AMD A6</a></li> </ul> </div> </div> <div class="attr"> <span>厚度:</span> <div class="ul_list"> <ul id="height"> <li><a href="#">刀鋒輕薄</a></li> <li><a href="#">便攜輕薄</a></li> <li><a href="#">普通輕薄</a></li> </ul> </div> </div> <div class="attr"> <span>顯卡:</span> <div class="ul_list"> <ul id="xiankao"> <li><a href="#">入門級獨顯</a></li> <li><a href="#">性能級獨顯</a></li> <li><a href="#">玩家級獨顯</a></li> </ul> </div> </div> <div class="attr"> <span>大家說:</span> <div class="ul_list"> <ul id="allspeak"> <li><a href="#">配置不錯</a></li> <li><a href="#">散熱很好</a></li> <li><a href="#">外觀不錯</a></li> <li><a href="#">屏幕大</a></li> </ul> </div> </div> <div class="showmore"> <a href="javascript:void(0)"><span>更多選項(處理器,厚度,顯卡,大家說)</span></a> </div> </div>
CSS代碼:
<style> *{ margin:0; padding:0;} body {font-size:12px;text-align:center;} a { color:#04D; text-decoration:none;} a:hover { background-color:#ABCDEF; text-decoration:none;} .SubCategoryBox {width:800px;margin:0 auto; text-align:center;margin-top:40px;border:1px solid #ccc;} .SubCategoryBox .mt {float:left;width:780px;height:50px;text-align:left;background-color:#f7f7f7;padding:0 10px;line-height: 50px;border-bottom: 1px solid #ccc;} .SubCategoryBox .mt span {float:left;width:50px;height:20px;text-align:left;background-color:#f7f7f7;padding:0 10px;color: red;} .SubCategoryBox .mt div {float:right;width:700px;height:20px;text-align:left;background-color:#f7f7f7;} .SubCategoryBox .mt div b {background-color:#FCFCFC; border:1px solid #ccc;margin-right:10px;color:#FF6A6A;padding: 2px;cursor:pointer;} .s {padding: 2px;cursor:pointer;color:#912CEE;} .SubCategoryBox .attr{ float:left;width:780px;text-align: left;background-color:#f7f7f7;padding:0 10px;color: red;border-bottom: 1px dashed #ccc; } .SubCategoryBox .attr span {float:left;text-align: right;width:50px;padding-top: 10px;} .SubCategoryBox .attr .ul_list {float:left;text-align: left;padding-bottom: 10px;padding-top: 10px;} .SubCategoryBox .attr .ul_list ul { list-style:none;} .SubCategoryBox .attr .ul_list ul li { display:block; float:left;text-align:center; width:120px; line-height:20px;} .showmore { clear:both; text-align:center;padding-top:10px;} .showmore a { display:block; width:250px; margin:0 auto; line-height:24px; border:1px solid #AAA;} .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} .onttop{float: right;padding-top: 5px;width:10px;height:10px;background-color: red;} .togglebackground{background-color: #ABCDEF;} </style>
Css代碼我就不去解釋了。
這里主要是Jquery代碼。可能我的方法不是很到位,希望各位見諒啊。有更好的可以蓋樓。一定改進的。
$(document).ready(function() { //定義一個數(shù)組。用于存放每個條目的內容 var arr = new Array(); //初始化 剛開始就將第3個以后的隱藏起來。 var $category = $("div.attr:gt(3)"); $category.hide(); //詳細和精簡的切換代碼。 $("div.showmore > a").click(function() { if (!$category.is(":visible")) { $category.show(); $(".showmore a span").css("background", "url(./img/up.gif) no-repeat 0 0").text("收起"); } else { $category.hide(); $(".showmore a span").css("background", "url(./img/down.gif) no-repeat 0 0").text("更多選項(處理器,厚度,顯卡,大家說)"); } }); //從這里開始就是響應點擊條目的事件了。 $("#pingpai > li >a").click(function() { //先清空div $(".mt div").empty(); arr[0] = $(this).text(); print_r(); }); $("#price > li").click(function() { $(".mt div").empty(); arr[1] = $(this).text(); print_r(); }); $("#chicun > li").click(function() { $(".mt div").empty(); arr[2] = $(this).text(); print_r(); }); $("#chukong > li").click(function() { $(".mt div").empty(); arr[3] = $(this).text(); print_r(); }); $("#cpu > li").click(function() { $(".mt div").empty(); arr[4] = $(this).text(); print_r(); }); $("#height > li").click(function() { $(".mt div").empty(); arr[5] = $(this).text(); print_r(); }); $("#xiankao > li").click(function() { $(".mt div").empty(); arr[6] = $(this).text(); print_r(); }); $("#allspeak > li").click(function() { $(".mt div").empty(); arr[7] = $(this).text(); print_r(); }); //循環(huán)打印數(shù)組 function print_r() { if (arr.length > 0) { for (var i = 0; i < arr.length; i++) { if (arr[i] != undefined) { var txt = $("<b name='" + i + "'></b>").text(arr[i]); $(".mt div").append(txt).fadeIn(); } } } } //jquery動態(tài)響應點擊事件,響應點擊之后刪除條目 $(document).on('click', 'b', function() { arr[$(this).attr("name")] = undefined; $("b[name='" + $(this).attr("name") + "']").fadeOut(500); }); });
到此,關于“Jquery怎么實現(xiàn)更多選項的功能”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注創(chuàng)新互聯(lián)網站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
網頁標題:Jquery怎么實現(xiàn)更多選項的功能-創(chuàng)新互聯(lián)
文章地址:http://m.rwnh.cn/article48/dspihp.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供網站策劃、微信公眾號、網站導航、網站營銷、搜索引擎優(yōu)化、靜態(tài)網站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容