您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“Jquery怎么实现更多选项的功能”,在日常操作中,相信很多人在Jquery怎么实现更多选项的功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Jquery怎么实现更多选项的功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
筛选功能如图:
这里只实现以下两个功能
更多选项。点击切换收起选项。
点击条目在上面显示已点击条目。
首先是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="#">联想</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() { //定义一个数组。用于存放每个条目的内容 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(); }); //循环打印数组 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动态响应点击事件,响应点击之后删除条目 $(document).on('click', 'b', function() { arr[$(this).attr("name")] = undefined; $("b[name='" + $(this).attr("name") + "']").fadeOut(500); }); });
到此,关于“Jquery怎么实现更多选项的功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。