溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Jquery怎么實(shí)現(xiàn)更多選項(xiàng)的功能”，在日常操作中，相信很多人在Jquery怎么實(shí)現(xiàn)更多選項(xiàng)的功能問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Jquery怎么實(shí)現(xiàn)更多選項(xiàng)的功能”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
篩選功能如圖：
這里只實(shí)現(xiàn)以下兩個(gè)功能
更多選項(xiàng)。點(diǎn)擊切換收起選項(xiàng)。
點(diǎn)擊條目在上面顯示已點(diǎ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="#">柯達(dá)</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="#">愛(ài)國(guó)者</a></li> <li><a href="#">AAA</a></li> <li><a href="#">明基</a></li> <li><a href="#">愛(ài)國(guó)者</a></li> <li><a href="#">BBBB</a></li> <li><a href="#">明基</a></li> <li><a href="#">愛(ài)國(guó)者</a></li> <li><a href="#">其它</a></li> </ul> </div> </div> <div class="attr"> <span>價(jià)格：</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="#">入門級(jí)獨(dú)顯</a></li> <li><a href="#">性能級(jí)獨(dú)顯</a></li> <li><a href="#">玩家級(jí)獨(dú)顯</a></li> </ul> </div> </div> <div class="attr"> <span>大家說(shuō)：</span> <div class="ul_list"> <ul id="allspeak"> <li><a href="#">配置不錯(cuò)</a></li> <li><a href="#">散熱很好</a></li> <li><a href="#">外觀不錯(cuò)</a></li> <li><a href="#">屏幕大</a></li> </ul> </div> </div> <div class="showmore"> <a href="javascript:void(0)"><span>更多選項(xiàng)（處理器，厚度，顯卡，大家說(shuō))</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代碼?？赡芪业姆椒ú皇呛艿轿?，希望各位見諒啊。有更好的可以蓋樓。一定改進(jìn)的。
$(document).ready(function() {
//定義一個(gè)數(shù)組。用于存放每個(gè)條目的內(nèi)容
var arr = new Array();
//初始化 剛開始就將第3個(gè)以后的隱藏起來(lái)。
var $category = $("div.attr:gt(3)");
$category.hide();
//詳細(xì)和精簡(jiǎn)的切換代碼。
$("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("更多選項(xiàng)（處理器，厚度，顯卡，大家說(shuō))");
}
});
//從這里開始就是響應(yīng)點(diǎn)擊條目的事件了。
$("#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動(dòng)態(tài)響應(yīng)點(diǎn)擊事件，響應(yīng)點(diǎn)擊之后刪除條目
$(document).on('click', 'b', function() {
arr[$(this).attr("name")] = undefined;
$("b[name='" + $(this).attr("name") + "']").fadeOut(500);
});
});到此，關(guān)于“Jquery怎么實(shí)現(xiàn)更多選項(xiàng)的功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼