基于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 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
详解webpack babel的配置
Jan 09 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 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使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
Vue渲染函数详解
2017/09/15 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
python爬虫基础之urllib的使用
2020/12/31 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
个人自我评价和职业目标
2014/01/24 职场文书
妇女干部培训方案
2014/05/12 职场文书
机械专业求职信
2014/05/25 职场文书
法人委托书的范本格式
2014/09/11 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
优秀教师单行材料
2014/12/16 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Python中requests库的用法详解
2022/06/05 Python