首页 建站教程 WEB前端 正文

JQuery实现div模拟select下拉列表

对于前端开发者来说,应该都知道默认的select下拉列表比较难看,而且在各个浏览器中select下拉框呈现的默认样式都不一样,尤其是在ie浏览器中,要想把它定义成自己喜欢的样式,简直拿它没什么办法,css兼容性差,简直low爆了。所以我们就可以通过div来模拟下拉框,可以通过样式让它定义成自己想要的样子。第一步:先搭建好结构添加css及html代码1,添加c...

对于前端开发者来说,应该都知道默认的select下拉列表比较难看,而且在各个浏览器中select下拉框呈现的默认样式都不一样,尤其是在ie浏览器中,要想把它定义成自己喜欢的样式,简直拿它没什么办法,css兼容性差,简直low爆了。所以我们就可以通过div来模拟下拉框,可以通过样式让它定义成自己想要的样子。

第一步:先搭建好结构添加css及html代码

1,添加css样式代码

h1,h2{font-weight:normal;color:#0CC;clear:both}
ul{margin:0;padding:0;list-style:none}
.box{width:1000px;margin:0 auto}
.box h1{text-align:center;font-weight:normal}
.selectBox{width:200px;height:36px;border:1px solid #3CF;position:relative;float:left;margin-right:50px}
.selectBox span{display:inline-block;width:200px;height:36px;line-height:36px;cursor:pointer;text-indent:10px}
.selectBox .in{color:#C36}
.selectBox ul{width:200px;position:absolute;top:36px;left:-1px;border:1px solid #3CF;display:none;background:#fff}
.selectBox li{cursor:pointer;line-height:36px;text-indent:10px}
.selectBox li:hover{background:#39F;color:#fff}
.selectBox font{position:absolute;right:10px;font-size:26px;font-family:"微软雅黑";color:#3CF;transform:rotate(90deg)}

2,添加html代码

<div class="box">
  <h1>select美化</h1>
  <div class="selectBox"> <font>›</font> <span>选项1</span>
    <ul>
      <li>选项1</li>
      <li>选项2</li>
      <li>选项3</li>
    </ul>
  </div>
  <div class="selectBox"> <font>›</font> <span>选项一</span>
    <ul>
      <li>选项一</li>
      <li>选项二</li>
      <li>选项三</li>
    </ul>
  </div>
</div>

第二步:构建交互触发效果,添加Jquery代码

$(function(){
    var s_title=$(".selectBox span");
    var s_select=$(".selectBox li");
    s_title.click(function(e){
        $(this).addClass("in");
        $(this).next("ul").show();
        e.stopPropagation();
        });        
        
    s_select.click(function(){
        var s_text=$(this).html();
        var s_title_2=$(this).parent('ul').prev("span");
        s_title_2.html(s_text).removeClass("in");
        $(this).parent('ul').hide();        
        });
        
    $(document).click(function(){
        s_title.removeClass("in");
        $(".select_box ul").hide();        
        });
});

通过以上代码就可以实现模拟select下拉列表样式。

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/202.html

相关推荐

CSS选择指定类元素或根据属性选择通配元素

CSS选择指定类元素或根据属性选择通配元素

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来根据视觉设计稿定义网页的样式,还原设计稿使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存...
WEB前端 2022.07.24 0 136
JQuery实现div模拟select下拉列表

JQuery实现div模拟select下拉列表

对于前端开发者来说,应该都知道默认的select下拉列表比较难看,而且在各个浏览器中select下拉框呈现的默认样式都不一样,尤其是在i...
WEB前端 2022.07.01 0 195
JQuery触发单选radio或多选checkbox隐藏显示div

JQuery触发单选radio或多选checkbox隐藏显示div

需要达到的功能效果就是当点击radio或checkbox时,显示或隐藏某div,这个功能主要用于表单或后台功能配置项,在优美主题配置中也运用到,这样有利于提升用户体验,选择功能显示对应的功能配置。实现...
WEB前端 2022.06.30 3 277

js判断两个input输入框必须任填一个

在表单提交中,有时需要判断两种类型必填其一,如何判断两个input只能填写一个,如果填两个或两个都不填都出现alert验证提示。实现代码如下:<!DOCTYPE html>&...
WEB前端 2021.11.08 0 1002
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持