ブートストラップを使用して背景を作成する場合、レスポンシブナビゲーションバーが使用されます。その中で、ドロップダウンコンポーネントはより頻繁に使用されます。使用すればするほど、クリックする必要があります。ドロップダウンのデフォルトでは、左マウスボタンを展開します。マウスを使用してそれを展開する(ホバー)すると、クリック時間を節約できます。これにより、効率が向上します。
元の変換のアイデアは、ホバーイベントをドロップダウン要素にバインドすることです。ホバーが上がったら、要素のクリックイベントを実行します。つまり、ホバーをクリックとして同期し、ホバーがクリックします。
しかし、自分で改造する代わりに、オンラインで検索して、既製のプラグインがあるかどうかを確認する方が良いと考えています。案の定、私はそれを検索し、githubでホストされたコードURL:ビュー
ここでは、コードをコピーするだけです。
;(function($、window、undefined){// jqueryプラグインへの範囲外//すべてのdropdownsvar $ alldropdowns = $(); // inclytlycloseothersが真実の場合、即座に//新しいものが$ .fn.dropdowdhoverhover(option options(opterse)opters opters(opterse)opter opers opters opters(opterse親$ alldropdowns = $ alldropdowns.add(this.parent()); return this.each(function(){var $ this = $(this).parent()、defaults = {delay:500、installycloseothers:true}、data = {delay:$(this).data( 'delay')、insclycloseothers:$ $ .extend(true、{}、defaults、options、data)、timeout; $ this.hover(){if(options.instrycloseothers === true)$ alldropdowns.removeclass( 'open'); window.cleartimeout(timeout); $(this).addclass( 'open'); {$ this.removeclass( 'open');}、options.delay);}著者がプラグインの前にセミコロンを追加したことがわかります。これにより、以前のJSコードが記述されないため、プラグインの互換性が向上します。ここにセミコロンが追加されていない場合、ラインブレイクがないためJSエラーが発生する可能性があります。
プラグインは、HTML要素データ - *パラメーター転送をサポートし、初期化パラメーター転送もサポートします。このJSコードを元のJSコードの後ろにBootstrapに配置するだけです。
上記は、ブートストラップのドロップダウンドロップダウンメニューをHoverトリガーに変更するための編集者の紹介です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!