html
<div class="top_search">
<div class="search_sel">
<p class="search_sel_show">搜<span>商品</span><b></b></p>
<ul class="seatch_sel_list">
<li>商品</li>
<li>店铺</li>
</ul>
</div>
<div class="search_con">
<input type="text" class="search_con_input" placeholder="雪纺" aria-label="雪纺" />
<input type="button" value="搜索" class="search_con_btn" />
</div>
</div>
css
/*搜索条*/
.top_search{
float: left;
margin-left: 230px;
margin-top: 32px;
height: 34px;
line-height: 34px;
border:1px solid #f2572c;
}
.top_search>div{
float: left;
background: #fff
}
.search_sel{
position: relative;
cursor: pointer;
}
.search_sel_show{
padding:0 12px;
color: #f2572c;
position: relative;
width: 55px;
}
.search_sel_show>b{
position: absolute;
top:16px;right: 10px;
width: 20px;
height: 10px;
background:url(../../image/sprites.png) no-repeat -40px -208px;
}
.seatch_sel_list{
position: absolute;
top:35px;left:-1px;
z-index: 500;
width: 78px;
border: 1px solid #D2D2D2;
border-top: none;
text-align: center;
background-color: #fff;
display: none;
}
.seatch_sel_list>li{
line-height: 34px;
}
.search_con{
position: relative;
}
.search_con_input{
height: 30px;
line-height: 30px;
width: 300px;
padding-right: 100px;
text-indent: 8px;
outline: none;
}
.search_con_btn{
position: absolute;
top:0px;right: 0px;
width: 100px;
height: 34px;
line-height: 30px;
text-align: center;
color: #fff;
background-color: #f2572c;
font-size: 16px;
outline: none;
cursor: pointer;
}
/*end 搜索条*/
js
// 搜索下拉
$(".search_sel_show").on("click",function(){
var list=$(this).next(),
listShow=list.css("display")
if(listShow=="none"){
list.slideDown();
}else{
list.slideUp();
}
});
$(".seatch_sel_list").on("click","li",function(){
var txt=$(this).text();
$(".search_sel_show>span").text(txt);
$(this).parent().slideUp();
});