bootstrapはどのようにドロップダウンメニューを設定してクリックしないで、マウスのサスペンションに変えて直接ドロップダウンメニューを表示します

方法1:
実は比較的に簡単で、1つのcssをプラスしてhoverの状態を設定するだけで、ドロップダウンメニューをblockに設定して、具体的なcss:.nav
 > li:hover .dropdown-menu {display: block;}
しかし、メインナビゲーションはリンクの効果を失いました!
方法2:
Bootstrapマウスのサスペンションの問題を解決することができるだけではなくて、1つのメニューにリンクを回復させてドロップダウンメニューをクリックする効果を実現することができるのはJSで実現して、bootstrapを分析します.jsファイルは発見して、Bootstrapはドロップダウンメニューを1つのJQueryプラグインに書いて、dropdownコードのセグメントの中で肝心ないくつかの文を見つけました:$(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
その中のclick.bs.dropdown.Data-apiイベントが閉じるといいです.コードは以下の通りです.$(document).ready(function(){
    $(document).off('click.bs.dropdown.data-api');
});
は、一級メニューにhref属性を復元し、ハイパーリンク機能を果たすことができます.プルダウンメニューが浮いている場合は、マウスを置くと表示され、上の階の方法でいいです.あるいはjsで実現する:$(document).ready(function(){
    dropdownOpen();//
});
/**
 *  ，
 */
function dropdownOpen() {

    var $dropdownLi = $('li.dropdown');

    $dropdownLi.mouseover(function() {
        $(this).addClass('open');
    }).mouseout(function() {
        $(this).removeClass('open');
    });
}転載先:https://www.cnblogs.com/lanxiaoyu/articles/4824634.html