Bootstrap 3 аккордеонный коллапс не работает на iphone

Эти "подменю аккордеона" работают в chrome и firefox, но не на iphone.

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

Некоторые элементы навигации содержат подменю. Для них я использовал бутстрап-аккордеонную разметку. Пользователь нажимает стрелку и расширяется "подменю" .

Проблема

Я использую хром на linux. Этот механизм прекрасно работает в хроме, firefox и в каждом браузере, который я могу получить, а также на моем личном телефоне Android. Он также работает на responsinator.com. Однако, поскольку у меня нет Safari и iPhone, я не смог проверить эту функцию непосредственно на iphone. Я работаю над получением эмулятора iPhone...

До тех пор некоторые другие люди смотрели это на iPhone, и мне сказали, что "подменю" вообще не работают. Когда пользователь нажимает на стрелку, ничего не происходит...

Вот выдержка из "пункта меню", содержащего "подменю" : обратите внимание, что я использую атрибуты "data-toggle" и "data-target":

<div class="panel panel-default">
    <!-- The "Trigger" -->
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="view.php?cms_nav_id=1" name="about">
                About</a>
            <a data-toggle="collapse" data-target="#collapse1">
                <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
            </a>
        </h4>
    </div>

    <!-- Populated submenus: -->
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <a href="view.php?cms_nav_id=7" name="ohioimprovementprocess">Ohio Improvement Process</a>
        </div>
        <div class="panel-body">
            <a href="view.php?cms_nav_id=8" name="org/orgbeliefs">Organization Beliefs</a>  
        </div>
    </div>

</div><!-- /.panel -->

Я действительно не знаю, что делать дальше: Подобные вопросы закончились "конфликтом css" или проблемами iphone относительно .click(), но я не использую это: я использую data-toggle/data-target. Я рассматриваю отказ от разметки "target-data-target" в ручном вызове события on('click', ... ), но я бы предпочел не...

Кстати, я называю это в нижней части моей страницы, если это важно:

<script src="/assets/dist/js/bootstrap.min.js"></script>

Что такое "bootstrap.js v3.0.0".

Есть ли у кого-нибудь другие подсказки? Любой недавний прямой опыт с такой проблемой?

Заранее благодарим за помощь.

Ответ 1

Итак, я думаю, что я понял это: моя первоначальная разметка основывалась исключительно на элементе данных-цели, но этого, по-видимому, недостаточно. Safari (на iPhone), похоже, также нуждается в атрибуте href (который действительно должен присутствовать на <a>, так что это работает:

<a data-toggle="collapse" data-target="#collapse1" href="#collapse1">
    <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>

Но это не так:

<a data-toggle="collapse" data-target="#collapse1">
    <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>

Ответ 2

Для меня коллапс будет работать на рабочем столе и в iphone, но некоторые из моих коллапсов не работают на ipads. Оказалось, что идеальное решение для меня было дано @Loris в ответ @Ryan, чтобы добавить стиль указателя к любому сбрасываемому триггеру (например, div, действующему как кнопка). Я обобщил это на следующий CSS:

[data-toggle~="collapse"] {
    cursor: pointer;
}

Ответ 3

глядя на это, у меня была такая же проблема, однако, когда вы добавляете href= "# collapse1", она переместится в верхнюю часть страницы. Я исправил это, обернув элемент кнопкой и удалив css для кнопок. Итак, ваш код будет выглядеть следующим образом:

<button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>

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

Ответ 4

Чтобы сделать эту работу для любого типа элемента, например div, вы можете использовать следующий метод jQuery (проверенный ios 8):

<div class="collapse-header" data-target="#collapse_0">
    Click this element...
</div>
<div id="collapse_0">
    ...to collapse this element.
</div>

<script>
    $('.collapse-header').on('click', function () {
        $($(this).data('target')).collapse('toggle');
    });
</script>

Ответ 5

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

$('.divClassName').on('click touchstart', function () {
     $($(this).data('target')).collapse('toggle');
});

Ответ 6

Вы можете исправить это, просто добавив этот атрибут в div, который запускает выпадающее меню.

cursor: pointer;