Bootstrap 3 Dropdown на iPad не работает

У меня есть простой раскрывающийся список Bootstrap 3, который работает во всех браузерах, которые я тестировал (Chrome, FF, IE, Chrome на Android), но он не работает в Safari или Chrome на iPad (ios 7.04).

Я думал, что это проблема с ontouchstart, как было предложено в некоторых других сообщениях, касающихся Bootstrap 2, но я пробовал это с локальным файлом и не имел успеха: Связи с загрузочным меню, не работающие на мобильных устройствах

Мне также не нужно решение, где мне нужно изменить исходный файл javascript, поскольку мы в настоящее время вытаскиваем его из CDN.

Я создал простой фрагмент здесь, чтобы проверить: http://www.bootply.com/104124

Ответ 1

Я понял это. Мне не хватало href= "#" в теге привязки. Он отлично работал в других браузерах, но не хрома или сафари на IOS. Сейчас работает отлично. Вот окончательный код для всех, кто интересуется:

  <div class="dropdown">
      <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">
        Action
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="ddaction">
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
      </li>
    </ul>
  </div>

И рабочий образец здесь: http://www.bootply.com/104147

Ответ 2

Если вы не хотите использовать тег <a> или добавить избыточный атрибут href, вы можете просто применить cursor:pointer css к элементу, и он будет работать

Ответ 3

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

.dropdown-menu {
  z-index: 25000 !important;
}

Ответ 4

Вы также можете добавить класс в свой тег с именем clickable. Это класс начальной загрузки. Он устанавливает курсор css: указатель.

<a class="clickable"></a>

Ответ 5

У меня просто была эта проблема - где выпадающее меню NavSphere 3 не открывалось на iPad mini 2 (но работало на iPhone 7 и на разных настольных компьютерах/ноутбуках). После отладки непосредственно на iPad я обнаружил, что проблема заключалась в использовании "let" вместо "var" внутри js-функции. Как только я переключил "let to" var, все было хорошо. Просто хотел добавить это здесь, если он (или удалив аналогичную устаревшую функцию) также станет для кого-то еще исправлением!