ブートストラップナビゲーションバーのドロップダウンコンポーネントは非常に頻繁に使用されます。この記事では、ブートストラップでドロップダウンコンポーネント拡張ホバーイベントを紹介します。特定のコンテンツは次のとおりです
このホバーイベントを実装する方法は？実際、ドロップダウンコンポーネントのクリックイベントに基づいて完了するのは簡単です。注意している人は、ドロップダウンボックスが表示されると、その親がオープンクラスの属性を持つことを見つけることができます。ホバーイベントを聞いているときに、親にオープンクラスを追加または削除するだけです。
boostrap-hover-dropdown.jsプラグイン、githubでホストされているコードURL：view
これが完全なJSプラグインコードです：
//ブートストラップレスポンシブナビゲーションバー<br>;（function（$、window、undefined）{// jqueryプラグインへの範囲外//すべてのドロップダウンを追跡するvar $ alldropdowns = $（）; Aboutは、Dropdown-Toggleの親$ alldropdowns = $ alldropdowns.add（this.parent（））; function（）{var $（this）.parent（）、defalys = {delay：installyclosethers：true}、data = $ {delay '） $（this）.data（ 'close-others'）}、options = $ .extend（true、{}、defaults、options、data）、$ this.hover（）{if（options.instryclose === true）$ alldropdowns.removeclass（ 'open'）; function {window.settimeout（）{$ this.removeclass;}、delay）;著者がプラグインの前にセミコロンを追加したことがわかります。これにより、以前のJSコードが記述されないため、プラグインの互換性が向上します。ここにセミコロンが追加されていない場合、ラインブレイクがないためJSエラーが発生する可能性があります。
オプションのパラメーター
遅延:(オプションのパラメーター）ミリ秒の遅延。これは、マウスがドロップダウンメニューやボタン/ナビゲーションアイテムにない前に、プルダウンを閉じる時です。デフォルト値は500です。
inclytlycloseothers ：（オプションパラメーター）ブール値は、真の場合、ナビゲーションを一致させる新しいセレクターを開始すると、他のすべてのドロップダウンメニューをすぐに閉じます。デフォルト値は真です。
上記のJSコードを追加した後、この時点で効果を実現することはできません。これは、別のステップを実行する必要があるためです。これは、要素に属性を追加することです。
data-hover = "ドロップダウン"
完全なHTML要素コード：
次のようにコードをコピーします。<a href = "javascript :;" data-toggle = "Dropdown" data-hover = "Dropdown"> </a>
オプションは、データ属性を介して、またはdata-delayおよびdata-close-othersを介して設定できます
コードを次のようにコピーします。
もちろん、最も簡単な方法もあります。これは、CSSホバーを使用して制御することです
[/code] .nav> li：hover .dropdown-menu {display：block;} [/code]
この種のコードも目的のホバー効果を実現できますが、ホバリング時にコンポーネントをクリックしてから別のコンポーネントに移動してホバーすると、次の効果が表示されます。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記は、あなたと共有したブートストラップドロップダウンコンポーネントを使用する方法です。ホバーイベントを習得することが役立つことを願っています。