Выпадающее меню не работает на мобильных устройствах

Самая последняя версия twitter bootstrap (2.3.2), похоже, имеет проблемы с выпадающими меню на мобильных устройствах.

Когда вы нажимаете на раскрывающееся меню после открытия меню, меню просто закрывается и никакая ссылка не нажимается. Вы можете увидеть это на своей примерной странице здесь: http://twitter.github.io/bootstrap/examples/hero.html

Я нашел проблему, опубликованную на их странице github, но без решения: https://github.com/twitter/bootstrap/issues/7927

Кто-нибудь знает трюк, чтобы исправить это?

Ответ 1

Временное исправление заключается в добавлении

.dropdown-backdrop{
    position: static;
}

в файл css.

Ответ 2

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

$('.dropdown-toggle').click(function(e) {
  e.preventDefault();
  setTimeout($.proxy(function() {
    if ('ontouchstart' in document.documentElement) {
      $(this).siblings('.dropdown-backdrop').off().remove();
    }
  }, this), 0);
});

через robdodson на github

Ответ 3

Для меня это добавило мои стили:

.dropdown-backdrop {
    z-index:0;
}

почти тот же ответ, что и Маттиас, я надеюсь, что это поможет.

Ответ 4

Я исправил эту проблему.

Мой код здесь

   <li class="dropdown custom open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> menu<b class="caret"></b></a>
             <ul class="dropdown-menu">
                 <li><a href="#">Sub menu</a></li>
                 <li><a href="#">Sub menu2</a></li>
              </ul>
           </li>

Добавьте в стиль CSS следующий стиль.

@media (max-width: 767px) { 
.dropdown.custom:hover .dropdown-menu {
  visibility: visible;
  display:block;
  border-radius:0;

}
}

Посетите: http://www.s4auto.co.za/

Ответ 5

Ни один из обычных ответов, похоже, не устранил нашу проблему на Android. Мы попробовали принятый ответ здесь и несколько javascript-хаков: Связи с загрузочным меню, не работающие на мобильных устройствах а также http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/

В конечном счете мы обнаружили, что закрытие происходило и условно называлось clearMenus(), только если родительские ссылки или родительский родитель не имели dropdown-submenu class

$(document)
.on('click.dropdown.data-api', function (e) {

    //fix start        
    var $parent = $(e.target).parent()
    var $grandparent = $parent.parent()

    if (!$parent.hasClass('dropdown-submenu') && !$grandparent.hasClass('dropdown-submenu')) {        
        clearMenus()
    }

    //clearMenus

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

}(window.jQuery);

Надеюсь, что это поможет!