読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Bootstrapのドロップダウンメニューのhover効果をiOS Safariで改善する

Bootstrap(3.3.5)は様々な場所でCSSのhoverを利用しています。
残念ながらiOS Safariではhoverに該当する状態がなく、ドロップダウンメニューでどれをタッチしたかわかりにくいなどという問題が発生します。

検索すると、hover対応の凝ったJavaScriptコードがたくさん見つかりますが、Bootstrapに限ればそう大層なことをしなくても改善できます。
例えば、Bootstrapのドロップダウンメニューはhoverとfocusに同じ設定がされているため、以下の5行でOK。

$(document).ready(function() {
    $('.dropdown-menu>li>a').on('touchstart', function() {
        $(this).focus();
    });
});

これだけ。touchstartと同時にfocusさせると、hoverと同じ色になってくれるので、どのメニューをタッチしたかがわかるようになります。