基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016-07-22 00:00
951 查看
基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用,在手机浏览器中能弹出下拉列表,却不能选择列表中的菜单项,通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决,替换后并不能解决。(红米手机UC浏览器不支持,小米手机UC浏览器正常,其他暂时未测试)
jquery:v1.11.2
bootstrap:v3.3.4
以下为前台页面代码:
以下为JS脚本:(给下拉菜单项添加click)
解决方法如下所示:
以下代码手机浏览器不支持,将以下元素指定ID赋值即可解决()
调整后代码:
以上所述是小编给大家介绍的基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
Bootstrap下拉菜单效果实例代码分享
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
第八篇Bootstrap下拉菜单实例代码
JS模拟bootstrap下拉菜单效果实例
Bootstrap布局组件教程之Bootstrap下拉菜单
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap 中下拉菜单修改成鼠标悬停直接显示
jquery:v1.11.2
bootstrap:v3.3.4
以下为前台页面代码:
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">本外地福利:</span> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" id="btnFuLi" name="btnFuLi" data-toggle="dropdown" value="" aria-expanded="false"> 请选择本外地福利… <span class="caret"></span> </button> <ul class="dropdown-menu" id="UiFuLi" role="menu"> <li><a title='1' href='#'>本地福利</a></li><li class='divider'></li> <li><a title='2' href='#'>外地福利</a></li><li class='divider'></li> </ul> <input id="txtFuLi" name="本外地福利"/> </div> </div>
以下为JS脚本:(给下拉菜单项添加click)
DataBindFuLi: function () { $("#UiFuLi li a").bind("click", function () { var $this = $(this); var $a = $this.parent().parent().prev() var t = $this.text(); $a.val($this.attr('title')); $('#txtFuLi').val($this.attr('title')); $a.text($this.text()); $a.append("<span class='caret'>"); }); }
解决方法如下所示:
以下代码手机浏览器不支持,将以下元素指定ID赋值即可解决()
$this.parent().parent().prev()
调整后代码:
$("#drpWorkType li a").bind("click", function () { var $this = $(this); //var $a = $this.parent().parent().prev() $('#txtWorkType').val($this.attr('title')); $('#btnWorkType').val($this.attr('title')); $('#btnWorkType').text($this.text()); //$a.val($this.attr('title')); //$a.text($this.text()); //$a.append("<span class='caret'>"); });
以上所述是小编给大家介绍的基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)Bootstrap下拉菜单效果实例代码分享
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
第八篇Bootstrap下拉菜单实例代码
JS模拟bootstrap下拉菜单效果实例
Bootstrap布局组件教程之Bootstrap下拉菜单
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap 中下拉菜单修改成鼠标悬停直接显示
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- jQuery实现向下滑出的平滑下拉菜单效果
- 点击后慢慢弹出下拉菜单效果代码(栏目管理常用)
- jQuery下拉友情链接美化效果代码分享
- js实现点击向下展开的下拉菜单效果代码
- 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
- 浅析Bootstrap验证控件的使用
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap插件全集
- Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
- Bootstrap框架动态生成Web页面文章内目录的方法
- js下拉菜单中自动信息轮换播放
- JS组件Bootstrap Table使用实例分享
- bootstrap学习笔记之初识bootstrap
- js实现简洁大方的二级下拉菜单效果代码
- Bootstrap下拉菜单效果实例代码分享