Панель обрушения Bootstrap не открывается на ipad

Question

Я использую Bootstrap (3.3.5) с темой sb-admin-2. Мои панели обрушения прекрасно работают на рабочем столе (хром на OsX) и на телефоне (Chrome на Android), но не будут открываться на Ipad (хрома или сафари).

Вот код для одного из моих панелей:

<div class="panel panel-default"> 
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseTwo"> 
     <h4 class="panel-title">Select Columns</h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum</div> 
    </div> 
</div> 

Я видел от этого другого SO ответил, что если я реализую коллапс, используя < в > тег, и иметь HREF, что фиксирует ipad проблема. Ответ Witchfinder здесь:

Bootstrap Collapsed Menu Links Not Working on Mobile Devices

Как так:

<h4 class="panel-title"> 
    <a class="panel-heading collapsed" data-toggle="collapse" 
     data-target="#collapseTwo" href="#collapseTwo"> 
     Select Columns 
    </a> 
</h4> 

Я попробовал это, и это не исправить. Вроде. Но у него есть некоторые проблемы:

1. Весь бар больше не доступен для кликов, просто текст. Мне нужен бар.
2. href является привязкой, поэтому, когда вы нажимаете на нее, она обновляет адресную строку, и это заставляет страницу перейти к телу панели. Без href адресная строка остается неизменной, и страница не перескакивает. Гораздо приятнее.

Я пробовал другое решение из этого вопроса, где вы редактируете код для загрузки, - чтобы удалить ontouchstart, но в моем случае это не исправить.

Кто-нибудь знает, как исправить это, не добавляя href? Или, по крайней мере, то, что происходит. Куда идет клик?

Answer 1

Это может быть трюк для Весь бар больше не доступен для кликов, просто текст. Я хочу, чтобы бар часть, но только один раз попробовать:

Накройте весь бар с более один якорь, имеющий href="#collapseTwo", и я уверен, что она должна быть направлена ​​на весь бар в настоящее время.

<a href="#collapseTwo"> 
    <h4 class="panel-title"> 
     <a class="panel-heading collapsed" data-toggle="collapse" 
      data-target="#collapseTwo" href="#collapseTwo"> 
      Select Columns 
     </a> 
    </h4> 
</a> 

Что касается url изменения, я думаю, его неизбежным, не уверен, хотя.

Я нашел еще одно сообщение, что установка style="cursor: pointer;" на элемент также работает. Полезно, если вы не используете привязку!, который может решить вашу проблему url