利用Div仿Select控件

最新推荐文章于 2022-06-08 09:56:26 发布

Qiustion

最新推荐文章于 2022-06-08 09:56:26 发布

阅读量6.2k

点赞数

分类专栏： HTML5+CSS3+JS

本文链接：https://blog.csdn.net/Qiustion/article/details/51180041

版权

HTML5+CSS3+JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Html代码：

<div class="slDiv">
  <span id="btnSelect">工程名搜索</span>
  <div class="ulDiv">
    <ul>
      <li>地名地址搜索</li>
      <li>行政区域搜索</li>
      <li>燕郊区域搜索</li>
      <li>无主用地搜索</li>
    </ul>
  </div>
</div>

CSS代码：

*{font-family:'Microsoft YaHei';font-size:12px;color:#707070;}
ul,li{margin:0px;padding:0px;}
.slDiv{float:left;margin-top:5px;position:relative;}
.slDiv #btnSelect{background:url("../images/selAppear.png") right no-repeat;width:125px;display:inline-block;text-indent:10px;}
.slDiv .ulDiv{display:none;width:125px;border:1px solid #EEEEEE;border-radius:1px;background:#FFF;margin-top:8px;position:absolute;z-index:100;}
.slDiv .ulDiv.ulShow{display:block;}
.slDiv .ulDiv ul li{text-indent:10px;cursor:pointer;}
.slDiv .ulDiv ul li:hover{background:#cbebf6;}

js代码：

$('.slDiv #btnSelect').on('click',function(){
  $(this).siblings('.ulDiv').toggleClass('ulShow');
});
$('.slDiv .ulDiv ul li').on('click',function(){
  var selTxt=$(this).text();
  $('.slDiv #btnSelect').text(selTxt);
  $('.ulDiv').removeClass('ulShow');
});

====> 记录完毕