Jquery模拟下拉框及兼容
来源:互联网 发布:单相四极电机绕组数据 编辑:程序博客网 时间:2024/05/16 14:08
通过Jquery模拟下拉框 兼容ie Firefox chrome
<div class="label1"> <p><i>旅游产品名称</i><em></em></p> <ul style="display: none"> <li>旅游产品名称</li> <li>其他产品名称</li> <li>没有产品名称</li> <li>旅游产品名称</li> </ul> </div> $('.label1 em').click(function () { if($('.label1 ul').css('display') == 'none'){ //通过判断是否显示来模拟toggle $('.label1 ul').stop(true,true).slideDown(400) $(this).css("background-position",'-37px 0') $(document).click(function(){ //点击其他地方隐藏下拉框 $(".label1").find("ul").hide() $('.label1 em').css("background-position",'0') }) } else { $('.label1 ul').stop(true, true).slideUp(250); $(this).css("background-position", '0') } // 阻止冒泡事件 var e=arguments.callee.caller.arguments[0]||event; //火狐 e = window.event||e; if(document.all){ //只有ie识别document.all e.cancelBubble=true; //IE }else{ e.stopPropagation(); //chrome } //文字替换 $(".label1 ul li").click(function () { $(this).parent().siblings('p').find('i').text($(this).text()) })
toggle方法在jq1.8+中已被废弃
注意阻止冒泡事件在各浏览器下的兼容
0 0
- Jquery模拟下拉框及兼容
- 模拟下拉框,IPAd,iOS不兼容
- jquery模拟下拉框动作
- jQuery模拟Select下拉框
- jquery模拟select下拉框
- 用jQuery制作模拟下拉框
- 用jQuery制作模拟下拉框
- jquery模拟可输入的下拉框
- 使用jquery模拟select下拉框
- jQuery扩展模拟下拉列表框
- jQuery模拟下拉选
- jquery.chosen 强大的jquery模拟下拉框(select)插件
- jquery input 下拉框(模拟select控件)焦点事件
- jquery点击下拉菜单鼠标移开隐藏(可模拟下拉框)
- select下拉框兼容写法
- 模拟下拉列表框
- js 模拟下拉框
- 下拉框模拟只读
- 网页设计常用色彩搭配表
- 【NOIP2016】洛谷1563 玩具谜题
- 《机器学习实战》第三章 3.1 决策树的构造
- poj 3617 Best Cow Line
- java堆内存分析
- Jquery模拟下拉框及兼容
- Using Presto to combine data from Hive and MySQL in one SQL-like query
- BZOJ 3038: 上帝造题的七分钟2
- 关于学习linux的一些心得体会
- Maven:mirror和repository 区别
- linux ls -l 详解
- UVa 1658 Admiral
- 博客流量量4K人次标记
- Android Studio导入第三方jar包或依赖工程的方法