Подтвердить что ты не робот

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

У меня проблема с раскрывающимися списками меню Bootstrap на мобильных устройствах (Bootstrap 2). Аналогичный вопрос был задан здесь с раскрывающимися кнопками, однако ответ для этого был присущей ошибкой в ​​бутстрапе, который был решен в обновлении. Кажется, у меня такая же проблема, возможно, до моей разметки?

У меня есть сворачиваемый navbar с выпадающими списками, и все отлично работает на настольных браузерах. Однако на мобильном устройстве выпадающие окна откроются, когда вы нажмете на раскрывающийся список, но нажав на ссылки для выпадающего списка, вы просто сбросите выпадающий список снова - ссылки не могут быть достигнуты. Я пробовал различные версии бутстрапа и не могу исправить это, поэтому могу только представить себе, что это моя разметка. Вот он:

 <header class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#"><h1>Branding</h1></a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">Menu Item 1</a></li>
                    <li class="dropdown">                    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>      
                        <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Item 1</a></li>
                            <li><a href="#">Dropdown Item 2</a></li>
                            <li><a href="#">Dropdown Item 3</a></li>  
                            <li><a href="#">Dropdown Item 4</a></li>                           
                        </ul>
                    </li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</header>

Здесь пример репликации кода (извините, не удается отправить сайт): http://jsfiddle.net/yDjw8/1/

(Проблема может быть видна/реплицирована только на мобильном устройстве - я использую iOS)

Любая помощь будет высоко оценена.

4b9b3361

ОТВЕТЫ

Ответ 2

Обнаружено это исправление для версии 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>

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

Ответ 3

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

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

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

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

Ответ 4

Я решил эту же проблему:

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... так что вы должны объединить новую строку в точной позиции на ней.

Удачи!:)

Ответ 5

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

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

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

Ответ 6

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

Это исправило проблему для меня.

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

JS Fiddle: http://jsfiddle.net/yDjw8/2/

Ответ 10

Это исправление для Bootstrap 2.3.2, и оно основано на ответе @asbanks (fooobar.com/questions/181576/...).

В ответ на ответ asbanks этот script также распространяет вызовы 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");
  }
});

Ответ 11

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

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

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

Ответ 12

jquery-1.11.2, bootstrap-3.3.2:

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

Ответ 13

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

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

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

            });
        });

Ответ 14

добавление 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>