jquery怎么优化 下拉菜单效果

 我来答
白卡PALA
2017-07-22 · 知道合伙人软件行家
白卡PALA
知道合伙人软件行家
采纳数:648 获赞数:3420
性能测试4年工作经验。

向TA提问 私信TA
展开全部

下拉菜单的默认样式在不同类型的浏览器中显示的效果非常不同,单纯的用css来统一样式可能非常有局限性,使用Jquery+css优化起来不但简单,而且实用性也非常广,主要原理为设置select透明度为0,利用css样式把span美化成select的样式,利用jquery把select选择的option的值传给span。

下面就是jquery优化下拉菜单效果的具体实现代码:

Html

<a class="btn-select">
  <span class="cur-select">请选择</span>
   <select class="form-control">
  <option>这是IE浏览器下的默认显示效果</option>
  <option>这是Firefox浏览器下的默认显示效果</option>
  <option>这是Opera浏览器下的默认显示效果</option>
  <option>这是chrome浏览器下的默认显示效果</option>
</select>
</a>


CSS

.btn-select { 
position: relative; 
display: block; 
height:30px;
line-height: 30px; 
border:1px solid #ccc;
color:#3D3F42;

.btn-select .cur-select { 
position: absolute; 
display: block; 
width: 100%; 
height: 25px; 
line-height: 25px; 
background:url(/Themes/Employee/Content/images/ico.png) no-repeat 98% 45% transparent; 
text-indent: 10px; 
}
.searchInselectW .store-selector .btn-select:hover{
    background:#fff;
    color:#3D3F42;
}
.btn-select:hover, .cur-select:hover {
color:#3D3F42;
}
.btn-select select { 
position:absolute;
top:0;
left:0;
height:30px;
opacity:0;
filter:alpha(opacity=0);

.btn-select select option { 
text-indent: 10px; 

.btn-select select option:hover { 
color: #fff; 
}

Jquery

$(function(){
    $(document).on("change", function() {
        $("select").each(function() {
            var $selectText = $(this).children("option:selected").text();
            $(this).parent().find("span").text($selectText);
        });
    }); 
}
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式