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

前端技术 2023/09/05 JavaScript

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

本文地址：https://www.stayed.cn/item/12338

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案