jq多条件搜索展开收起代码
今天实现的效果是点击展开按钮展示更多搜索条件,点击收起只显示一行搜索条件,这也是我最近项目中用到的。
该代码适用于搜索条件比较多,界面布局又比较有限,默认收起只留下一行搜索条件,展开之后再进行更多搜索。
HTML 代码
<ul class="search-ul"> <li class="clearfix"> <label>时间:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>地点:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>人物:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>情景:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>时间:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>地点:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>人物:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>情景:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>人物:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="clearfix"> <label>情景:</label> <div class="search-box"> <input type="text"> </div> </li> <li class="search-li clearfix"> <span class="open">展开<i>></i></span> <button class="reset">重置</button> <button class="search">查询</button> </li> </ul>
CSS 代码
[rem="1920"] { font-size: 5.2083333333vw } [rem="750"] { font-size: 13.333333333vw } * { -webkit-tap-highlight-color: transparent } html { -webkit-text-size-adjust: 100% } body { margin: 0; font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; font-size: 16px } figure,p { margin: 0 } h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; font-weight: 400 } dd,dl,dt,li,ol,ul { margin: 0; padding: 0; list-style: none } a { background-color: transparent; text-decoration: none } img { border: 0 } table { border-collapse: collapse; border-spacing: 0 } td,th { padding: 0 } button,input,select,textarea { color: inherit; font: inherit; margin: 0; padding: 0; outline: none; } textarea { overflow: auto } article,aside,figcaption,figure,footer,header,hgroup,main,nav,section { display: block } template { display: none } .hidden2,.hidden3,.hidden4,.hidden5 { display: -webkit-box; /* autoprefixer:off */ -webkit-box-orient: vertical; overflow: hidden } .hidden1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .hidden2 { -webkit-line-clamp: 2 } .hidden3 { -webkit-line-clamp: 3 } .hidden4 { -webkit-line-clamp: 4 } .hidden5 { -webkit-line-clamp: 5 } .clearfix::after,.clearfix::before { content: ""; width: 0; height: 0; display: block; clear: both } .search-ul { width: 1000px; margin: 0 auto; } .search-ul li { float: left; width: 25%; margin-top: 20px; } .search-ul li label { float: left; width: 40%; height: 30px; line-height: 30px; text-align: right; } .search-ul li .search-box { float: left; width: 60%; } .search-ul li .search-box input { width: 100%; height: 28px; line-height: 28px; border: 1px solid #ececec; } .search-ul li button { float: right; width: 60px; height: 30px; line-height: 30px; text-align: center; } .search-ul li.search-li { float: right; cursor: pointer; } .search-li span { float: right; color: skyblue; margin-left: 15px; display: block; width: 60px; height: 30px; line-height: 30px; } .search { background: skyblue; color: #FFFFFF; border: none; } .reset { border: 1px solid #cccccc!important; color: #cccccc; background: #fff; margin-left: 15px; } .search-li .open i { display: inline-block; transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -moz-transform: rotate(90deg); /* Firefox */ -webkit-transform: rotate(90deg); /* Safari 和 Chrome */ -o-transform: rotate(90deg); /* Opera */ }
JS 代码
var len = $(".search-ul li").length; $(".search-ul li").filter(":lt(3)").show().end().filter(":gt(2)").hide(); $(".search-li").show(); //展开 var searchFlag = true; $(document).on('click', ".open", function() { if (searchFlag == true) { //展开 $(".search-ul li").show(); $(".open").html("收起>"); $(".open i").css('transform', 'rotate(-90deg)'); searchFlag = false; } else { $(".open").html("展开>"); $(".open i").css('transform', 'rotate(90deg)'); if (len - 1 > 3) { $(".search-ul li").filter(":lt(3)").show().end().filter(":gt(2)").hide(); $(".search-li").show(); } else { $(".search-ul li").show(); } searchFlag = true; } })
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jq多条件搜索展开收起代码
码云笔记 » jq多条件搜索展开收起代码