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

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.