Html
    Css
    Js

    
                        
[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 */
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

多条件搜索展开收起代码

更新时间:2020-11-04 22:14:11

该代码适用于搜索条件比较多,界面布局又比较有限,默认收起只留下一行搜索条件,展开之后再进行更多搜索,有问题随时欢迎可各位进行指教。

0