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

Ссылки на загрузочные ссылки не работают на мобильных устройствах

Я использую сворачивающееся меню с элементами подменю в панели навигации. Меню сглаживается на узких дисплеях, и элементы подменю отображаются правильно.

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

Когда я тестирую страницу в обозревателе рабочего стола, все работает правильно.

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

Любые идеи? ТИА.

4b9b3361

ОТВЕТЫ

Ответ 1

Похоже, что это известная проблема с Bootstrap (https://github.com/twitter/bootstrap/issues/4550 и, возможно, https://github.com/twitter/bootstrap/issues/7968), что очень разочаровывает, потому что оно открыто долгое время и никогда не фиксируется, и основной причиной использования Bootsrtap является его обещание гибкого дизайна.

Исправление, предлагаемое в https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8, похоже, работает, но использует исходный код Bootstrap, поэтому, если вы используете мини-версию и не используете исходные скрипты выглядят по-разному.

Я исправил его в моем случае в мини-версии, добавив подстроку "disable-" в тест touchstart, поэтому отключив эту функцию.

Чтобы сделать это в вашем минитипированном файле bootstrap.min.js, найдите подстроку

"ontouchstart"

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

"disable-ontouchstart"

Спасибо @Shmalzy за помощь.

Ответ 2

Я столкнулся с этой проблемой на iPad. Я обнаружил, что в тегах привязки отсутствовал следующее:

 href="#collapseSection"

Где #collapseSection - это идентификатор сбрасывающей панели. Пример:

<div class="panel panel-default">
  <div class="panel-heading"><a class="accordion-toggle" href="#collapseHelp" data-toggle="collapse" data-target="#collapseHelp" data-parent="#accordion">Printing Problems?</a></div>
  <div id="collapseHelp" class="panel-collapse collapse">
    <div class="panel-body">Before you contact the helpdesk, have a look at <a href="Help.asp?PrintHelp">our help system</a>.</div>
  </div>
</div>

Вам не нужно изменять мини-код JavaScript для исправления этой проблемы, так как он отлично работает в примерах Bootstrap. Все это правильно форматирует ваш HTML-код.

Ответ 3

когда список элементов меню слишком длинный, вам может потребоваться добавить следующий код в свой CSS, чтобы иметь возможность видеть полное меню в мобильных браузерах (проверено на iOS):

@media (max-width: 1023px) {
.nav-collapse {
    overflow-y: auto;
}
}

Ответ 5

Я попробовал разборные панели с Bootstrap не как навигацию или меню, а просто сворачиваемую панель (например, http://www.w3schools.com/bootstrap/bootstrap_collapse.asp) и пришла по одной и той же проблеме.

Я понял, что изменение <a...> до <button...> помогло, по крайней мере, для моего телефона (действительно, в этом примере также используется button). Затем вы можете нарисовать кнопку, чтобы она выглядела как ссылка, на самом деле есть класс CSS Bootstrap под названием btn-link, который делает именно это, или вы можете добавить свой собственный стиль. Для моего варианта использования это было самое простое и простое решение.

Ответ 6

Мне нужно было сделать что-то быстро и грязно, поэтому я использовал то, что раньше делалось в "старые времена".
Я дал свои ссылки: <a style="position:relative;z-index:1000" ...