Почему в iOS не работает выпадающая кнопка кнопки Bootstrap?
Похоже, что даже демонстрация bootstrap здесь не работает на iOS. Кажется, вы не можете выбрать элемент из него на iPhone или iPad.
Есть ли исправление для этого?
Ответы
Ответ 1
Быстрое исправление, как отмечалось во многих комментариях к проблеме github:
https://github.com/twitter/bootstrap/issues/2975#issuecomment-8670606
добавьте этот script непосредственно перед тегом html:
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
});
Я тестировал вышеупомянутый метод как на ios5, так и на 6. Он работает как шарм
Если вы хотите изменить загрузочный javascript, вы можете вместо исправления выше удалить touchstart.dropdown.data-api из привязки html для clearMenus в нижней части файла.
просто измените это
$('html')
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
к этому
$('html')
.on('click.dropdown.data-api', clearMenus)
Ответ 2
Вам нужно добавить настраиваемый jquery в файл. Если вы хотите его использовать, используйте:
<div class="container">
<div class="btn-group lt category_bg">
<p>Adults</p>
<button class="btn btn-large" data-toggle="dropdown"><cite>0</cite> <span class="caret"></span></button>
<ul class="dropdown-menu ">
<li id='adult_0' onClick="flight_user(this.id)"><a href="#" >0</a></li>
<li id='adult_1' onClick="flight_user(this.id)"><a href="#" >1</a></li>
<li id='adult_2' onClick="flight_user(this.id)"><a href="#" >2</a> </li>
<li id='adult_3' onClick="flight_user(this.id)"><a href="#">3</a></li>
<li id='adult_4' onClick="flight_user(this.id)"><a href="#">4</a></li>
</ul>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script>
function flight_user(selected){
var value = jQuery("#" + selected).find('a').text();
jQuery("#" + selected).parent().parent().find('cite').html(value);
}
</script>
Я могу дать вам живое демо для этого, если вы хотите
Ответ 3
Этот script решить эту проблему. Просто добавьте этот код
$(document).on('click', 'a.your-drop-down-link', function(event){
event.stopPropagation();
event.preventDefault();
if(event.handled !== true) {
if ( $(this).parent().hasClass('open') ) {
$(this).parent().removeClass('open');
}else{
$(this).parent().addClass('open');
}
event.handled = true;
} else {
return false;
}
});