Bootstrap 中下拉菜單修改成鼠標(biāo)懸停直接顯示

    本文介紹將Bootstrap的二級菜單由點擊顯示改為鼠標(biāo)懸停顯示的具體實現(xiàn)方法，希望對大家有所幫助。
    最近公司做網(wǎng)頁用到Bootstrap的菜單功能，要實現(xiàn)鼠標(biāo)懸停顯示二級菜單，于是就研究了一下，大概有兩種方法。
    第一種方法：修改樣式表
    實際上比較簡單，只需要加一個css設(shè)置下hover的狀態(tài)，把下拉菜單設(shè)置成block，具體css：
    代碼如下:
    .nav > li:hover .dropdown-menu {display: block;}
    這句css加在bootstrap.min.css之后出現(xiàn)的css中，你試下！
    缺點：
    1.相應(yīng)的頂級菜單不可點擊 
    2.鼠標(biāo)滑到二級菜單后，頂級菜單沒有樣式
    第二種方法：利用JQuery的特性來實現(xiàn)
    結(jié)合了網(wǎng)上的教程，利用JQuery中的兩個事件就可以解決問題，具體css：
    代碼如下:
    //關(guān)閉click.bs.dropdown.data-api事件，使頂級菜單可點擊
    $(document).off('click.bs.dropdown.data-api');
    //自動展開
    $('.nav .dropdown').mouseenter(function(){
     $(this).addClass('open');
    });
    //自動關(guān)閉
    $('.nav .dropdown').mouseleave(function(){
     $(this).removeClass('open');
    });
    這種方法不僅頂級菜單可以點擊，而且樣式也不會丟，而且能解決Bootstrap鼠標(biāo)懸停的問題，推薦大家使用。