Bootstrap v2 Dropdown Navigation не работает в мобильных браузерах

В сжатом файле bootstrap.min.js найдите подстроку

"ontouchstart"

и замените его на

"disable-ontouchstart"

Проверьте этот похожий вопрос SO: Свернутое меню Bootstrap Ссылки не работают на мобильных устройствах

Нашел это исправление для версии 2.3.2:

<script>
jQuery(document).ready(function($)  {
$("li.dropdown a").click(function(e){
    $(this).next('ul.dropdown-menu').css("display", "block");
    e.stopPropagation();
  });
}); </script>     

Работал над двумя отдельными навигационными системами, которые я построил.

Я использую BootStrap 3.1.1. Я пробовал много ответов, выпадающее меню отлично работает на устройствах Android, но по-прежнему не работает на устройстве iOS. Наконец-то я нахожу корень проблемы.

Safari на iPhone поддерживает событие клика только для элементов <a> и <input>. См. этот отрывок Делегирование события Click на iPhone.

Поэтому нам нужно добавить настраиваемое делегирование кликов. Следующий код решит проблему.

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});

Я решил эту же проблему, выполнив следующее:

1. Откройте js/bootstrap-dropdown.js или его уменьшенную версию.

2. Найдите строки или места для: touchstart.dropdown.data-api

3. Должно быть только 4 случая. Что-то вроде этого:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

Вы должны вставить эту новую строку между 2-м и 3-м вхождением:

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

4. Код вашей новости должен быть примерно таким:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

Будьте осторожны с уменьшенными версиями Bootstrap.js... поэтому вы должны соединить новую строку в точном месте на ней.

Удачи! :)

Я рекомендую загрузить последние файлы Bootstrap и заменить bootstrap.js и bootstrap.min.js на вашем сервере новыми версиями.

Это решило проблему для меня.

Я нашел решение этого на форуме bootstrap git-hub. Вам нужно включить только одну строку кода в скрипт в готовом документе, как,

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

Это работа для меня!!!

Это исправление предназначено для Bootstrap 2.3.2 и основано на ответе @asbanks (https://stackoverflow.com/a/18107103/437019).

Помимо ответа asbanks, этот скрипт также распространяет вызовы JS из ссылок внутри раскрывающихся списков, а открытый раскрывающийся список закрывает другие открытые.

$(function() {
  return $("a.dropdown-toggle:not(.multiselect)").click(function(e) {
    $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
    $(this).next("ul.dropdown-menu").css("display", "block");
    return e.stopPropagation();
  });
});

$(document).on('click click.dropdown.data-api', function(e) {
  if (!$(e.target).closest('.dropdown, .multiselect-container').length) {
    return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
  }
});

Кажется, это работает без каких-либо проблем. Класс «open» уже существует с начальной загрузкой и должен работать, но по какой-то причине это не так. Этот код заставляет его работать соответственно. :)

    jQuery(document).ready(function($) {
    $("li.dropdown").click(function(e){
        $(this).toggleClass("open");
        });
    });

Похоже, у меня все работает, возможно, попробуйте заменить файлы начальной загрузки новой копией, если вы случайно что-то там испортили. Или, если это не сработает, убедитесь, что вы импортируете все. Вы уверены, что импортируете все файлы CSS и JS?

Когда вы щелкаете по раскрывающемуся списку, он добавляет класс open к вашему <li class="dropdown">, что дает вам: <li class="dropdown open">. Когда вы щелкаете ссылку в раскрывающемся меню или «Пункт меню 2 (раскрывающийся список)», класс open удаляется, в результате чего раскрывающееся меню снова складывается.

В приведенной ниже скрипте показано, как остановить распространение события click, но это может вызвать проблемы в другом месте. Кроме того, я предотвратил распространение только по пункту № 1 в раскрывающемся списке. Вы можете использовать jQuery, чтобы это произошло со всеми элементами раскрывающегося списка.

JS-скрипт: http://jsfiddle.net/yDjw8/2/

Я использую bootstrap-3.3.1 и сталкиваюсь с той же проблемой в приложении Android phonegap.

Я нашел забавный обходной путь после нескольких проб и ошибок:

// clueless hack here!!!! otherwise dropdown menu doesn't work
$('.dropdown-toggle').dropdown('toggle');
$('.dropdown-toggle').dropdown('toggle');

добавление role="button" к <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> сработало для меня

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>

jquery-1.11.2, бутстрап-3.3.2:

$('#yourId').on('hidden.bs.dropdown', function (){
    $(this).click(function (event) {
       $('.dropdown-toggle').dropdown('toggle'); 
    });
});

Я думаю, если вы сделаете следующее, ссылки будут работать правильно

$(document).ready(function(){
            $('.youClass').click(function(){
                var menuItem = '<a class=" " href=" ">Log Out</a>';

                $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>');

            });
        });

Мне приходилось работать с Bootatrap v2.2.1. Выпадающий список работал на десктопе, но сразу же закрывался после открытия на мобильном телефоне.

И я думаю, проблема в том, что старая версия не рассчитана на работу с сенсорными устройствами.

Итак, мое исправление основано на предотвращении некоторых событий касания:

$('a.dropdown-toggle').on('touchstart', function (e) {
  e.preventDefault();
});

В редких случаях может потребоваться добавить:

  $('a.dropdown-toggle').on('touchmove', function (e) {
      e.preventDefault();
  });

  $('a.dropdown-toggle').on('touchcancel', function (e) {
      e.preventDefault();
  });