The reason why the menu item cannot be selected on the mobile phone end of the drop-down menu implemented based on Bootstrap is attached with a solution. The bootstrap menu item

The reason why the menu item cannot be selected on the mobile phone end of the drop-down menu implemented based on Bootstrap is attached with a solution. The bootstrap menu item

The Bootstrap-based drop-down menu can be used normally in the Computer Browser. In the mobile browser, a drop-down list is displayed, but the menu items in the list cannot be selected, you can use Baidu to find the cause and replace ontouchstart In the bootstrap script file with disable-ontouchstart. (The UC browser of The Red mi mobile phone is not supported. The UC browser of the Xiaomi mobile phone is normal, and is not tested for the time being)

Jquery: v1.11.2

Bootstrap: v3.3.4

The following is the front-end Page code:

<Div class = "input-group"> <span class = "input-group-addon" id = "sizing-addon2"> field benefits: </span> <div class = "btn-group"> <button type = "button" class = "btn-default dropdown-toggle" id = "btnFuLi" name =" btnFuLi "data-toggle =" dropdown "value =" "aria-expanded =" false "> Please select this field benefit... <Span class = "caret"> </span> </button> <ul class = "dropdown-menu" id = "UiFuLi" role = "menu"> <li> <a title = '1' href = '#'> Local Benefits </a> </li> <li class = 'divider'> </li> <a title = '2' href = '#'> Foreign welfare </a> </li> <li class = 'divider'> </li> </ul> <input id = "txtFuLi" name = "local welfare"/> </div>

The following is a JS Script: (add click to the drop-down menu)

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 mobile browsers. You can assign values to the IDS specified by the following elements ()

$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'));$('#btnWorkType').text($this.text());//$a.val($this.attr('title'));//$a.text($this.text());//$a.append("<span class='caret'>");});

The above is the reason why the Bootstrap-based drop-down menu cannot be selected on the mobile phone, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!