基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法


Posted in Javascript onJuly 22, 2016

基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用,在手机浏览器中能弹出下拉列表,却不能选择列表中的菜单项,通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决,替换后并不能解决。(红米手机UC浏览器不支持,小米手机UC浏览器正常,其他暂时未测试)

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实现的下拉菜单手机端不能选择菜单项的原因附解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery UI 实现email输入提示实例
Aug 15 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 #Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 #Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 #Javascript
详细探究ES6之Proxy代理
Jul 22 #Javascript
jquery常用的12个小功能
Jul 22 #Javascript
BootStrap 附加导航组件
Jul 22 #Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 #Javascript
You might like
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
详解Python的单元测试
2015/04/28 Python
python开发之list操作实例分析
2016/02/22 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python中rb含义理解
2020/06/18 Python
存储过程和sql语句的优缺点
2014/07/02 面试题
大学生护理专业自荐信
2013/10/03 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
大学生个人求职信例文
2014/07/07 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis