わかりましたので、私が必要とするものはかなり簡単です。
(を使用してclass="dropdown-toggle" data-toggle="dropdown"
)いくつかのドロップダウンメニューを含むナビゲーションバーを設定しましたが、正常に動作します。
実は「onClick
」は機能しますが、「」が機能すればいいのonHover
ですが。
これを行う組み込みの方法はありますか?
わかりましたので、私が必要とするものはかなり簡単です。
(を使用してclass="dropdown-toggle" data-toggle="dropdown"
)いくつかのドロップダウンメニューを含むナビゲーションバーを設定しましたが、正常に動作します。
実は「onClick
」は機能しますが、「」が機能すればいいのonHover
ですが。
これを行う組み込みの方法はありますか?
回答:
最も簡単な解決策はCSSです。次のようなものを追加します...
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
data-toggle
属性を削除して親アイテムをクリックできるようにする必要があります...モバイル画面の付随的な損傷に注意してください。
これを行う最良の方法は、ホバーでブートストラップクリックイベントをトリガーすることです。このように、それはまだタッチデバイスフレンドリーのままである必要があります
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
jQueryのホバー関数を使用できます。
open
マウスが入ったときにクラスを追加し、マウスがドロップダウンから離れたときにクラスを削除するだけです。
これが私のコードです:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
show
代わりにを使用しopen
、さらにdropdown-menu
:を含める必要が$('.dropdown').hover(function() { $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show');}, function() {$(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show');});
ありました(書式設定は申し訳ありません。)
jQueryを使用する簡単な方法は次のとおりです。
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
});
.first()
- $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200);
...
CSSの場合も、クリックすると狂ってしまいます。これは私が使用しているコードであり、モバイルビューでも何も変更しません。
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
ナビゲーションアイテムにカーソルを合わせると、マウスポインターがアクティブになることを確認できます。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
だからあなたはこのコードを持っています:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
通常はクリックイベントで機能し、ホバーイベントで機能する必要があります。これは非常に簡単です。次のjavascript / jqueryコードを使用してください。
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
これは非常にうまく機能し、ここに説明があります:ボタンとメニューがあります。ボタンにカーソルを合わせるとメニューが表示され、ボタンからマウスアウトすると100ms後にメニューが非表示になります。なぜそれを使用するのか疑問に思うのは、メニューの上にあるボタンからカーソルをドラッグする時間が必要だからです。メニューに入ると、時間がリセットされ、好きなだけそこにとどまることができます。メニューを終了すると、タイムアウトなしで即座にメニューが非表示になります。
私は多くのプロジェクトでこのコードを使用しましたが、それを使用して問題が発生した場合は、遠慮なく質問してください。
これは、jQueryをホバーしたときにドロップダウンにするために使用するものです
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function () {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
}, function () {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
});
});
フェードインフェードアウトアニメーションでホバー機能を使用してこれを試してください
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
これは、ブートストラップ用の独自のホバークラスを作成するのに役立ちます。
CSS:
/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
display: block;
}
マージンは、不要なクローズを回避するように設定されており、オプションです。
HTML:
<div class="btn-group hover_drop_down">
<button type="button" class="btn btn-default" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
onclick openを削除する場合は、ボタン属性data-toggle = "dropdown"を削除することを忘れないでください。これは、入力がドロップダウンで追加されている場合にも機能します。
これは、モバイルデバイスを使用していない場合にのみナビゲーションバーをホバリングします。これは、モバイルデバイスでナビゲーションをホバーするとうまく機能しないためです。
$( document ).ready(function() {
$( 'ul.nav li.dropdown' ).hover(function() {
// you could also use this condition: $( window ).width() >= 768
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
}, function() {
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
});
});
私は他の解決策を試しますが、私はブートストラップ3を使用していますが、ドロップダウンメニューがすぐに閉じてそれの上に移動できません
liにclass = "dropdown"を追加すると想定して、タイムアウトを追加しました
var hoverTimeout;
$('.dropdown').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('open');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('open');
}, 150);
});
ドロップダウンホバー機能の適切なプラグインを公開しました。このプラグインでは、dropdown-toggle
要素をクリックしたときの動作を定義することもできます。
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
以前に存在していたすべてのソリューションに問題がありました。単純なCSSはの.open
クラスを使用していない.dropdown
ため、ドロップダウンが表示されている場合、ドロップダウントグル要素に対するフィードバックはありません。
jsのものはをクリックすることを妨げている.dropdown-toggle
ので、ドロップダウンはホバーに表示され、開いたドロップダウンをクリックすると非表示になり、マウスを移動するとドロップダウンがトリガーされて再び表示されます。一部のjsソリューションはiOSの互換性を妨げています。一部のプラグインは、タッチイベントをサポートしている最新のデスクトップブラウザーで動作していません。
そのため、私は、Bootstrap Dropdown Hoverプラグインを作成しました。これにより、標準のBootstrap javascript APIのみを使用して、ハックなしでこれらの問題をすべて防止します。
でclick
イベントをトリガーするとhover
、小さなエラーが発生します。if mouse-in
とa click
はその逆の効果を生み出します。これと。より良いソリューション:opens
mouse-out
close
mouse-in
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
jquery
$(document).ready( function() {
/* $(selector).hover( inFunction, outFunction ) */
$('.dropdown').hover(
function() {
$(this).find('ul').css({
"display": "block",
"margin-top": 0
});
},
function() {
$(this).find('ul').css({
"display": "none",
"margin-top": 0
});
}
);
});
私が提案しているソリューションは、タッチデバイスでnavbar-toggle
はないこと、および(ハンバーガーメニュー)が表示されていないことを検出し、ホバーすると親メニュー項目がサブメニューを表示し、クリックするとリンクをたどります。
また、一部のブラウザではナビゲーションバーとメニューの間のギャップによってサブアイテムにホバーできないため、マージントップが0になります。
$(function(){
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if(!is_touch_device() && $('.navbar-toggle:hidden')){
$('.dropdown-menu', this).css('margin-top',0);
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>
$(function(){
$("#nav .dropdown").hover(
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
},
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>
ブートストラップドロップダウンホバーで作業し、プロパティdisplay:blockを追加することでクリック時に閉じたままにします。CSSでこれらの属性を削除するdata-toggle = "dropdown" role = "button" from button tag
.dropdown:hover .dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>