Home
Bootstrapのドロップダウンメニューはクリックでないと展開しないのをマウスホバーで展開する方法をご紹介！
JavaScript
|
1 2 3 4 5 6 7 |
$('.dropdown').mouseenter(function(){ if(!$('.navbar-toggle').is(':visible')) { if(!$(this).hasClass('open')) { $('.dropdown-toggle', this).trigger('click'); } } }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#store-top" role="tab" data-toggle="tab">店舗情報</a> </li> <li class="nav-item"> <a class="nav-link" href="#store-zaseki" role="tab" data-toggle="tab">座席表</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">写真</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#photo_1" data-toggle="tab">料理</a> <a class="dropdown-item" href="#photo_2" data-toggle="tab">内観</a> <a class="dropdown-item" href="#photo_3" data-toggle="tab">外観</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#store-map" role="tab" data-toggle="tab">地図</a> </li> </ul> |
