温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Jquery 美化select

发布时间:2020-07-22 12:01:44 来源:网络 阅读:568 作者:1120173856 栏目:web开发

  功能:美化select 下拉列表

说明:因为IE不能通过css修改样式,所以需要通过Jquery来修改,下面是一个成功的案例,自己再修改下样式就好了

PS:如果需要用到多次的,注意z-index的值,(顶部的要给底部的值大)

 

 Javascript代码:

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

  $(document).ready(function(){

 

$('.select_box span').click(function(){ //鼠标移动函数

 $('.son_ul').hide(); //初始ul隐藏

 $(this).parent().find('ul.son_ul').show();  //找到ul.son_ul显示

 $(this).parent().find('li').hover(function(){

$(this).addClass('hover')},function(){$(this).removeClass('hover')}); //li的hover效果

 $(this).parent().click(function(){},

function(){

$(this).parent().find("ul.son_ul").hide(); 

}

);

 },function(){}

 );

$('ul.son_ul li').click(function(){

 $(this).parents('li').find('span').html($(this).html());

 $(this).parents('li').find('ul').hide();

 });

 

});

</script>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI