The drop-down menu based on Bootstrap can be used normally in a computer browser. The drop-down list can pop up in a mobile browser, but the menu items in the list cannot be selected. You can replace the ontouchstart in the bootstrap script file with disable-ontouchstart, but it cannot be solved after replacement. (Redmi mobile phone UC browser does not support it, Xiaomi mobile phone UC browser is normal, others have not been tested for the time being)
jquery: v1.11.2
bootstrap: v3.3.4
The following is the front desk page code:
<div><span id="sizing-addon2">Native local welfare: </span><div><button type="button" id="btnFuLi" name="btnFuLi" data-toggle="dropdown"value="" aria-expanded="false">Please select local welfare… <span></span></button><ul id="UiFuLi" role="menu"><li><a title='1' href='#'>Local welfare</a></li><li class='divider'></li><li><a title='2' href='#'>Outside welfare</a></li><li><li class='divider'></li> </ul><input id="txtFuLi" name="local welfare"/></div></div>
The following is the JS script: (Add click to the drop-down menu item)
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'>");});}The solution is as follows:
The following code is not supported by the mobile browser. Assign the following elements to specify the ID to solve the problem ()
$this.parent().parent().prev()
Adjusted code:
$("#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'));//$a.append("<span class='caret'>");});The above is the reason why the drop-down menu cannot be selected on the mobile phone of the mobile phone based on Bootstrap implementation. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!