ここのブートストラップデモでさえiOSでは機能しないようです。iPhoneやiPadではアイテムを選択できないようです。
これに対する修正はありますか?
ここのブートストラップデモでさえiOSでは機能しないようです。iPhoneやiPadではアイテムを選択できないようです。
これに対する修正はありますか?
github の問題のコメントの多くで指摘されているように、簡単な修正があります: https://github.com/twitter/bootstrap/issues/2975#issuecomment-8670606
次のスクリプトを HTML の終了タグの直前に追加します。
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
});
上記の方法を ios5 と 6 の両方でテストしました。
ブートストラップ JavaScript を変更する場合は、上記の修正の代わりに、ファイルの下部にある clearMenus の html バインディングから touchstart.dropdown.data-api を削除してください。
これを変えるだけ
$('html')
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
これに
$('html')
.on('click.dropdown.data-api', clearMenus)
このスクリプトはこの問題を解決します。このコードを追加するだけです
$(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;
}
});
ファイルにカスタマイズされた 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>
必要に応じて、これのライブデモを提供できます