关于移动端清除下拉菜单的默认样式

最新推荐文章于 2024-03-20 00:20:30 发布

viser123

最新推荐文章于 2024-03-20 00:20:30 发布

阅读量1.5k

点赞数

分类专栏：移动端文章标签： app

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      list-style: none;
    }
    .selectContainer{position:relative; width:262px; display:inline-block; _display:inline; _zoom:1; z-index:1000; background:#FFF; border:1px solid #CCC}
    .selectContainer input{}
    .selectContainer .selectOption{min-width:180px; padding:0 5px; line-height:25px; height:25px; white-space:nowrap; overflow:hidden;border:none; width:250px; z-index:1000}
    .selectContainer .shows{width:20px; height:20px; position:absolute; right:2px; top:2px; }
    .selectContainer ul{position:absolute; width:100%; top:25px; left:-1px; border-bottom:1px solid #CCC; display:none;}
    .selectContainer ul li{padding:0 5px; border:1px solid #CCC; border-bottom:1px solid #EEE; border-top:none; line-height:25px; width:252px; background:#FFF; cursor:pointer}
    .selectContainer ul li:hover{background:#F5F5F5}

    .selectContainer ul.dis{display:block!important;}
    /*.selectContainer ul.undis{display:noneimportant;}*/
    .zIndex{z-index:10000!important}
    .selectContainer .gray{color:#DDD}
  </style>
</head>
<body>
<div class="selectContainer">
  <span class="selectOption gray">请选择身份</span>
  <ul class="selectMenu">
    <li>江西省</li>
    <li>广东省</li>
    <li>江苏省</li>
    <li>河北省</li>
    <li>湖南省</li>
  </ul>
  <span class="shows"></span>
</div>
<br/>

<div class="selectContainer">
  <span class="selectOption gray">请选择1234</span>
  <ul class="selectMenu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>湖5南省</li>
  </ul>
  <span class="shows"></span>
</div>
<p>huhuhuhu</p>
<script src="assets/global/plugins/jquery.min.js" ></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" ></script>
<script type="text/javascript">
  (function($){

    jQuery.fn.select = function(options){
      return this.each(function(){
        var $this = $(this);
        var $shows = $this.find(".shows");
        var $selectOption = $this.find(".selectOption");
        var $el = $this.find("ul > li");

        $this.click(function(e){
          $(this).toggleClass("zIndex");
          $(this).children("ul").toggleClass("dis");
          e.stopPropagation();
        });

        $el.bind("click",function(){
          var $this_ = $(this);

          $this.find("span").removeClass("gray");
          $this_.parent().parent().find(".selectOption").text($this_.text());
        });

        $("body").bind("click",function(){
          $this.removeClass("zIndex");
          $this.find("ul").removeClass("dis");
        });

        //eahc End
      });

    }

  })(jQuery);
</script>
<script type="text/javascript">
  $(".selectContainer").select();
</script>
</body>
</html>

viser123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于移动端清除下拉菜单的默认样式

html>lang="en"> charset="UTF-8"> * { list-style: none; } .selectContainer{position:relative; width:262px; display:inline-block; _display:inline; _zoom:1; z-index:1000; back
复制链接

扫一扫

专栏目录