Twitter Bootstrap menüsü açılır menüsünü tıklama yerine fareyle nasıl yapabilirsiniz?

Bootstrap menümün menü başlığını tıklatmak yerine otomatik olarak fareyle üzerine gelmesini istiyorum. Menü başlıklarının yanındaki küçük okları da kaybetmek istiyorum.

Birden çok alt menüyü destekleyen ve gelecekteki kullanıcılar için göndereceğimi düşündüğüm en son (v2.0.2) Bootstrap çerçevesine dayanan saf bir fareyle üzerine gelme açılır menüsü oluşturdum:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

gösteri

Menünün otomatik olarak fareyle üzerine gelmesini sağlamak için bu temel CSS kullanılarak gerçekleştirilebilir. Seçiciyi gizli menü seçeneğine göre ayarlamanız ve ardından uygun lietiketin üzerine geldiğinde blok olarak görüntülenecek şekilde ayarlamanız gerekir . Twitter bootstrap sayfasından örnek alındığında, seçici aşağıdaki gibi olacaktır:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Ancak, Bootstrap'ın duyarlı özelliklerini kullanıyorsanız, bu işlevi daraltılmış bir gezinme çubuğunda (daha küçük ekranlarda) istemezsiniz. Bunu önlemek için, yukarıdaki kodu bir medya sorgusuna sarın:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Oku (düzeltme işareti) gizlemek için bu, Twitter Bootstrap sürüm 2 ve daha düşük sürümünü veya sürüm 3'ü kullanmanıza bağlı olarak farklı şekillerde yapılır:

Önyükleme 3

Sürüm 3'teki düzeltme kodunu kaldırmak <b class="caret"></b>için .dropdown-togglebağlantı elemanından HTML'yi kaldırmanız yeterlidir :

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 ve altı

Sürüm 2'deki düzeltme işaretini kaldırmak için CSS hakkında biraz daha fazla bilgiye ihtiyacınız var ve :aftersözde öğenin nasıl daha ayrıntılı çalıştığına bakmanızı öneririm . Anlama yolunuza başlamak, twitter bootstrap örneğindeki okları hedeflemek ve kaldırmak için aşağıdaki CSS seçicisini ve kodunu kullanırsınız:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Bunların nasıl çalıştığına daha fazla bakarsanız ve sadece size verdiğim cevapları kullanmazsanız, lehinize çalışacaktır.

@CocaAkat'a, alt menülerin ana fareyle gösterilmesini önlemek için ">" çocuk birleştiricisini kaçırdığımızı belirttiği için teşekkürler

"Başım ağrıyor" cevabına ek olarak (ki bu harika):

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

Devam eden 2 sorun var:

1. Açılır bağlantıyı tıkladığınızda açılır menü açılır. Ve kullanıcı başka bir yere tıklamazsa veya üzerine gelmezse, açık bir kullanıcı arayüzü oluşturmadan açık kalır.
2. Açılır bağlantı ile açılır menü arasında 1 piksel boşluk vardır. Bu, açılır menü ve açılır menü arasında yavaş hareket ederseniz açılır menünün gizlenmesine neden olur.

(1) 'e çözüm "nav" bağlantısındaki "class" ve "data-toggle" öğelerini kaldırmaktır

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Bu, üst sayfanıza varsayılan uygulama ile mümkün olmayan bir bağlantı oluşturma olanağı da sağlar. "#" Öğesini kullanıcıya göndermek istediğiniz sayfayla değiştirebilirsiniz.

(2) 'ye çözüm, .dropdown menü seçicisindeki kenar boşluğunu kaldırmaktır

.navbar .dropdown-menu {
    margin-top: 0px;
}

Ben biraz jQuery kullandım:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Burada gerçekten çok iyi çözümler var. Ama devam edip benimkini başka bir alternatif olarak buraya koyacağımı düşündüm. Sadece basit bir jQuery snippet'i, sadece tıklatmak yerine açılanlar için fareyi destekliyorsa, bootstrap'ın yaptığı gibi yapar. Ben sadece sürüm 3 ile test ettim, bu yüzden sürüm 2 ile çalışıp çalışmadığını bilmiyorum. Editörünüze bir snippet olarak kaydedin ve bir anahtar inme var.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

Temel olarak, sadece açılır sınıfın üzerine geldiğinizde, açık sınıfı buna ekleyeceğini söylüyor. Sonra işe yarıyor. Açılır sınıfla üst li'ye veya alt ul / li'lere gelmeyi bıraktığınızda, açık sınıfı kaldırır. Açıkçası, bu birçok çözümden sadece biridir ve yalnızca belirli .dropdown örnekleri üzerinde çalışmasını sağlamak için ekleyebilirsiniz. Veya ebeveyne veya çocuğa bir geçiş ekleyin.

CSS stilinizi üç kod satırında özelleştirin

.dropdown:hover .dropdown-menu {
   display: block;
}

Böyle bir dropdownsınıfa sahip bir öğeniz varsa (örneğin):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Ardından, jQuery kodunun bu snippet'ini kullanarak, açılır menünün başlığını tıklamak yerine fareyle üzerine gelindiğinde otomatik olarak açılmasını sağlayabilirsiniz:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

İşte bir demo

Bu cevap @Michael cevabına dayanıyordu, bazı değişiklikler yaptım ve açılır menünün düzgün çalışması için bazı eklemeler ekledim

[Güncelleme] Eklenti GitHub'da ve bazı iyileştirmeler üzerinde çalışıyorum (sadece veri öznitelikleri ile kullanmak gibi (JS gerekli değil). Kodu aşağıda bıraktım, ancak GitHub'da olanlarla aynı değil.

Tamamen CSS sürümünü beğendim, ancak kapanmadan önce bir gecikme olması güzel, genellikle daha iyi bir kullanıcı deneyimi (yani, açılır listenin 1 piksel dışına çıkan bir fare kayması için cezalandırılmadı) ve yorumlarda belirtildiği gibi , orijinal düğmedeki açılır menüye geçtiğinizde uğraşmanız gereken 1 piksel kenar boşluğu veya bazen nav beklenmedik bir şekilde kapanıyor.

Birkaç sitede kullandığım hızlı bir eklenti oluşturdum ve güzel çalıştı. Her gezinme öğesi bağımsız olarak ele alınır, bu nedenle kendi gecikme zamanlayıcılarına vb.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

delayParametresi oldukça açıktır veinstantlyCloseOthers yeni bir aşkın sizi vurgulu açık olacak anında yakın diğer tüm Açılır menülerde.

Saf CSS değil, ama umarım bu geç saatte başka birine yardımcı olacaktır (yani bu eski bir iş parçacığıdır).

İsterseniz #concrete5, bu özetteki farklı adımlarla çalışmasını sağlamak için yaşadığım farklı işlemleri ( IRC ile ilgili bir tartışmada ) görebilirsiniz: https://gist.github.com/3876924

Eklenti deseni yaklaşımı, bireysel zamanlayıcıları vb. Desteklemek için çok daha temizdir.

Daha fazla bilgi için blog yayınına bakın .

Bu benim için çalıştı:

.dropdown:hover .dropdown-menu {
    display: block;
}

Bu Bootstrap 3'te yerleşiktir. Sadece bunu CSS'nize ekleyin:

.dropdown:hover .dropdown-menu {
    display: block;
}

JQuery ile daha da iyi:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

$().dropdown('toggle')Fareyle üzerine gelindiğinde açılır menüyü değiştirmek için varsayılan yöntemi kullanabilirsiniz :

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Sadece eklemek istiyorum, (benim yaptığım gibi) birden fazla açılan varsa yazmak gerekir:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Ve düzgün çalışacak.

Bence en iyi yol şöyle:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

Örnek işaretleme:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

Bunu yapmanın en iyi yolu, Bootstrap'ın tıklama etkinliğini bir fareyle tetiklemektir. Bu şekilde, yine de dokunmatik cihaz dostu kalmalıdır.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

Ben aşağıdaki gibi başardım:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

Umarım bu birine yardımcı olur ...

Ayrıca margin-top: 0, .dropdown menüsü için bootstrap css marjını sıfırlamak için kullanılır, böylece kullanıcı açılır menüden menü listesine yavaşça geldiğinde menü listesi kaybolmaz.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.nav .dropdown-menu {
    margin-top: 0;
}

Bu muhtemelen aptalca bir fikirdir, ancak sadece aşağı bakan oku kaldırmak için

<b class="caret"></b>

Bu yukarı dönük olan için hiçbir şey yapmaz, ama ...

Bootstrap 3 açılır fareyle üzerine gelme işlevi için uygun bir eklenti yayınladım .dropdown-toggle öğeye (tıklama devre dışı bırakılabilir):

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

Zaten birçok çözüm varken neden başardım?

Daha önce var olan tüm çözümlerle sorunlarım vardı. Basit CSS olanlar .open,.dropdown , bu nedenle açılır menü görünür durumdayken açılır geçiş öğesi hakkında geri bildirim olmaz.

JS olanlar üzerine tıklayarak müdahale .dropdown-toggle , bu yüzden açılır menü fareyle görünür, ardından açılan bir açılır menüye tıkladığında gizler ve fareyi hareket ettirerek açılır menü tekrar görünmesini tetikler. Bazı js çözümleri iOS uyumluluğunu bozuyor, bazı eklentiler dokunmatik olayları destekleyen modern masaüstü tarayıcılarında çalışmıyor.

Bu nedenle, tüm bu sorunları önleyen herhangi bir kesmek olmadan yalnızca standart Bootstrap javascript API'sini kullanarak önleyen Bootstrap Dropdown Hover eklentisini yaptım . Aria özellikleri bile bu eklenti ile iyi çalışıyor.

Mousehover'da alt menüyü açmak için bu kodu kullanın (yalnızca masaüstü):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

İlk düzey menünün tıklanabilir olmasını istiyorsanız, mobil cihazlarda bile bunu ekleyin:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

Alt menü (açılır menü) masaüstünde fareyle, mobil cihazda ve tablette tıklama / dokunma ile açılır. Alt menü açıldıktan sonra, ikinci bir tıklama bağlantıyı açmanıza izin verir. Sayesinde if ($(window).width() > 767), alt menü mobil cihazlarda tam ekran genişliğini alacaktır.

$('.dropdown').hover(function(e){$(this).addClass('open')})

Bu, yukarıdakileri gizleyecek

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

Bu, tabletten daha küçüklerse, açılır menüleri ve caretlerini gizlemelidir.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

JQuery çözümü iyidir, ancak fareyle üzerine gelme düzgün çalışmadığından tıklama olaylarıyla (mobil veya tablet için) ilgilenmek gerekir ... Belki bazı pencere yeniden boyut algılama yapabilir mi?

Andres Ilich'in cevabı iyi çalışıyor gibi görünüyor, ancak bir medya sorgusuna sarılmalıdır:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}

Sürüm 2 için çok basit bir çözüm, sadece CSS. Mobil ve tablet için aynı işlevselliği korur.

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}

Bu komut dosyasıyla bootstrap.js dosyasının üzerine yazın.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 

İşte menüde veya geçiş düğmesinde gezinmeyi bıraktıktan sonra menü kapatılmadan önce hafif bir gecikme ekleyen tekniğim. <button>Normalde nav menü görüntülemek için tıklayın edeceğini #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

Sudharshan'ın cevabını geliştirmek için, XS ekran genişliklerinde vurguyu önlemek için bunu bir medya sorgusuna sarıyorum ...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

Ayrıca biçimlendirmedeki düzeltme işareti gerekli değildir, sadece li için açılan sınıf .

WordPress Bootstrap için çalışır:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

Yani bu koda sahipsiniz:

<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>

Normalde bir tıklama etkinliğinde çalışır ve bir hover etkinliğinde çalışmasını istersiniz. Bu çok basit, sadece şu JavaScript / jQuery kodunu kullanın:

$(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();
        })
    })
})

Bu çok iyi çalışıyor ve işte açıklama: bir düğmemiz ve bir menümüz var. Düğmenin üzerine geldiğimizde menüyü görüntüler ve düğmenin faresini bıraktığımızda 100 ms sonra menüyü gizleriz. Bunu neden kullandığımı merak ediyorsanız, imleci menü üzerindeki düğmeden sürüklemek için zamana ihtiyacınız var. Menüdeyken, zaman sıfırlanır ve orada istediğiniz kadar kalabilirsiniz. Menüden çıktığınızda, herhangi bir zaman aşımı olmadan anında menüyü gizleyeceğiz.

Bu kodu birçok projede kullandım, eğer herhangi bir sorunla karşılaşırsanız, bana soru sormaktan çekinmeyin.