클릭하지 않고 호버에서 Twitter 부트 스트랩 메뉴 드롭 다운을 만드는 방법

메뉴 제목을 클릭하지 않고 마우스 포인터로 Bootstrap 메뉴가 자동으로 드롭 다운되도록하고 싶습니다. 메뉴 제목 옆에있는 작은 화살표를 잃고 싶습니다.

여러 하위 메뉴를 지원하는 최신 (v2.0.2) 부트 스트랩 프레임 워크를 기반으로 한 순수한 마우스 오버 드롭 다운 메뉴를 만들었으며 다음 사용자를 위해 게시 할 것이라고 생각했습니다.

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>

데모

메뉴가 자동으로 호버링되도록하려면 기본 CSS를 사용하면됩니다. 숨겨진 메뉴 옵션에 대해 선택기를 실행 한 다음 적절한 li태그를 가리킬 때 블록으로 표시되도록 설정해야합니다 . 트위터 부트 스트랩 페이지에서 예제를 선택하면 선택기는 다음과 같습니다.

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

그러나 Bootstrap의 반응 형 기능을 사용하는 경우 축소 된 탐색 표시 줄 (더 작은 화면)에서이 기능을 원하지 않습니다. 이를 피하려면 위 코드를 미디어 쿼리로 감싸십시오.

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

화살표 (캐럿)를 숨기려면 Twitter Bootstrap 버전 2 이하를 사용하는지 또는 버전 3을 사용하는지에 따라 다른 방식으로 수행됩니다.

부트 스트랩 3

버전 3에서 캐럿을 제거하려면 anchor 요소 <b class="caret"></b>에서 HTML을 제거하면됩니다 .dropdown-toggle.

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

부트 스트랩 2 이하

버전 2에서 캐럿을 제거하려면 CSS에 대한 통찰력이 필요하며 :after의사 요소가 어떻게 작동하는지 자세히 살펴 보는 것이 좋습니다 . 트위터 부트 스트랩 예제에서 화살표를 대상으로하고 제거하기 위해 이해하기 시작하려면 다음 CSS 선택기 및 코드를 사용하십시오.

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

당신이 이것들이 어떻게 작동하는지 더 자세히 살펴보고 내가 당신에게 주어진 대답을 사용하지 않는다면 그것은 당신에게 유리할 것입니다.

부모 호버에 하위 메뉴가 표시되지 않도록하기 위해 ">"하위 콤비 네이터가 누락되었음을 지적한 @CocaAkat에게 감사합니다.

"나의 머리가 아프다"(대단한)의 답변 외에도 :

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

남아있는 두 가지 문제가 있습니다.

1. 드롭 다운 링크를 클릭하면 드롭 다운 메뉴가 열립니다. 그리고 사용자가 다른 곳을 클릭하거나 뒤로 마우스를 가져 가면 어색한 UI가 생성되지 않는 한 열려 있습니다.
2. 드롭 다운 링크와 드롭 다운 메뉴 사이에 1 픽셀의 여백이 있습니다. 드롭 다운 메뉴와 드롭 다운 메뉴 사이를 천천히 이동하면 드롭 다운 메뉴가 숨겨집니다.

(1)에 대한 해결책은 탐색 링크에서 "class"및 "data-toggle"요소를 제거하는 것입니다.

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

또한 기본 구현으로는 불가능했던 부모 페이지에 대한 링크를 만들 수 있습니다. "#"을 사용자를 보내려는 페이지로 바꿀 수 있습니다.

(2)에 대한 해결책은 드롭 다운 메뉴 선택기에서 여백을 제거하는 것입니다.

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

나는 약간의 jQuery를 사용했다.

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

여기에는 정말 좋은 솔루션이 많이 있습니다. 그러나 나는 다른 대안으로 여기에 내 것을 넣을 것이라고 생각했습니다. 단순히 클릭 대신 드롭 다운에 대한 호버를 지원하면 부트 스트랩이하는 방식을 수행하는 간단한 jQuery 스 니펫입니다. 나는 이것을 버전 3으로 만 테스트 했으므로 버전 2에서 작동하는지 알 수 없습니다. 편집기에서 코드 조각으로 저장하고 키를 눌렀을 때 사용하십시오.

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

기본적으로 드롭 다운 클래스에 마우스를 올리면 열린 클래스가 추가됩니다. 그런 다음 작동합니다. 드롭 다운 클래스가있는 상위 li 또는 하위 ul / li에 마우스를 올리면 열린 클래스가 제거됩니다. 분명히 이것은 많은 솔루션 중 하나 일 뿐이며 특정 .dropdown 인스턴스에서만 작동하도록 추가 할 수 있습니다. 또는 부모 또는 자식으로 전환을 추가하십시오.

세 줄의 코드로 CSS 스타일을 간단히 사용자 정의하십시오.

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

dropdown이 클래스와 같은 요소가있는 경우 (예 :)

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

그런 다음 jQuery 코드 스 니펫을 사용하여 제목을 클릭하지 않고 드롭 다운 메뉴가 자동으로 드롭 다운되도록 할 수 있습니다.

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

여기 데모가 있습니다

이 답변은 @Michael answer에 의존 하고 드롭 다운 메뉴가 제대로 작동하도록 변경하고 추가했습니다.

[업데이트] 플러그인은 GitHub 에 있습니다 있으며 데이터 속성 (JS 필요 없음)과 함께 사용하는 것과 같은 몇 가지 개선을 위해 노력하고 있습니다. 아래 코드를 남겨 두었지만 GitHub의 것과 동일하지 않습니다.

나는 순전히 CSS 버전을 좋아했지만 일반적으로 더 나은 사용자 경험 (즉, 드롭 다운 외부에서 1px 떨어진 마우스 슬립에 대해서는 처벌되지 않음) 및 주석에 언급 된 것처럼 닫히기 전에 지연되는 것이 좋습니다. , 처리해야 할 1px의 여백이 있거나 원래 버튼에서 드롭 다운으로 이동할 때 탐색 메뉴가 예기치 않게 닫히는 경우가 있습니다.

몇 사이트에서 사용한 빠른 작은 플러그인을 만들었고 훌륭하게 작동했습니다. 각 탐색 항목은 독립적으로 처리되므로 자체 지연 타이머 등이 ​​있습니다.

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

delay매개 변수는 꽤 자기 설명이며,instantlyCloseOthers 위로 마우스를 가져 가면 열려있는 다른 모든 드롭 다운이 즉시 닫힙니다.

순수한 CSS는 아니지만이 늦은 시간에 다른 사람을 도울 수 있기를 바랍니다 (예 : 오래된 스레드).

원하는 경우 #concrete5IRC 에 대한 토론에서 내가 진행 한 다양한 프로세스 를 통해이 요지의 여러 단계를 통해 작동하게 할 수 있습니다. https://gist.github.com/3876924

플러그인 패턴 접근 방식은 개별 타이머 등을 지원하기 위해 훨씬 깨끗합니다.

자세한 내용은 블로그 게시물 을 참조하십시오 .

이것은 나를 위해 일했다 :

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

이것은 부트 스트랩 3에 내장되어 있습니다. CSS에 추가하십시오.

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

jQuery를 사용하면 더 좋습니다.

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')마우스를 가져 가면 기본 방법을 사용하여 드롭 다운 메뉴를 전환 할 수 있습니다 .

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

추가하기를 원한다면 여러 드롭 다운이있는 경우 다음과 같이 작성해야합니다.

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

그리고 제대로 작동합니다.

내 의견으로는 가장 좋은 방법은 다음과 같습니다.

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

샘플 마크 업 :

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

가장 좋은 방법은 호버로 부트 스트랩의 클릭 이벤트를 트리거하는 것입니다. 이러한 방식으로 여전히 터치 장치에 친숙해야합니다.

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

다음과 같이 관리했습니다.

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

나는 이것이 누군가를 돕기를 바랍니다 ...

드롭 다운 메뉴의 부트 스트랩 CSS 여백을 재설정하기 위해 margin-top : 0을 추가하여 사용자가 드롭 다운 메뉴에서 메뉴 목록으로 천천히 이동할 때 메뉴 목록이 사라지지 않도록합니다.

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

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

이것은 어리석은 생각 일 수 있지만 아래쪽을 가리키는 화살표를 제거하려면

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

이것은 위쪽을 가리키는 것에 대해서는 아무것도하지 않습니다 ...

Bootstrap 3 드롭 다운 호버 기능에 적합한 플러그인 을 게시했습니다 .dropdown-toggle 요소를 (클릭을 비활성화 할 수 있음).

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

이미 많은 솔루션이있을 때 내가 만든 이유는 무엇입니까?

기존의 모든 솔루션에 문제가있었습니다. 간단한 CSS는의 .open클래스를 사용하지 않으므로 .dropdown드롭 다운이 표시 될 때 드롭 다운 토글 요소에 대한 피드백이 없습니다.

js는 클릭을 방해합니다. .dropdown-toggle 하므로 드롭 다운이 호버에 표시 된 다음 열린 드롭 다운을 클릭하면 숨겨지고 마우스를 움직이면 드롭 다운이 다시 표시됩니다. 일부 js 솔루션은 iOS 호환성을 깨뜨리고 일부 플러그인은 터치 이벤트를 지원하는 최신 데스크탑 브라우저에서 작동하지 않습니다.

그렇기 때문에 표준 부트 스트랩 자바 스크립트 API 만 사용하여 해킹없이 이러한 모든 문제를 방지 하는 부트 스트랩 드롭 다운 호버 플러그인 을 만들었습니다 . 이 플러그인에서는 Aria 속성조차도 잘 작동합니다.

이 코드를 사용하여 마우스로 가리키면 하위 메뉴가 열립니다 (데스크톱 만 해당).

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

첫 번째 레벨 메뉴를 클릭 가능하게하려면 모바일에서도 다음을 추가하십시오.

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

하위 메뉴 (드롭 다운 메뉴)는 데스크탑에서 마우스로 가리 키거나 모바일 및 태블릿에서 클릭 / 터치로 열립니다. 하위 메뉴가 열리면 두 번째 클릭으로 링크를 열 수 있습니다. 덕분에 if ($(window).width() > 767)하위 메뉴는 모바일에서 전체 화면 너비를 사용합니다.

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

이것은 위로 것들을 숨길 것입니다

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

드롭 다운과 캐럿이 태블릿보다 작 으면 숨겨져 야합니다.

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

jQuery 솔루션은 훌륭하지만 호버가 제대로 작동하지 않으므로 클릭 이벤트 (모바일 또는 태블릿의 경우)를 처리해야합니다 ... 창 크기 조정 감지가 가능합니까?

Andres Ilich의 대답은 잘 작동하는 것 같지만 미디어 쿼리로 묶어야합니다.

@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;
    }
}

CSS 만 버전 2에 대한 매우 간단한 솔루션입니다. 모바일 및 태블릿에 대해 동일한 친숙한 기능을 유지합니다.

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

이 스크립트로 bootstrap.js를 덮어 씁니다.

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') })
});

}); 

다음은 메뉴 또는 토글 버튼을 가리키면 메뉴가 닫히기 전에 약간의 지연을 추가하는 기술입니다. <button>당신은 일반적으로 탐색 메뉴가 표시 클릭 것 #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의 답변 을 향상시키기 위해 XS 디스플레이 너비에서 호버를 방지하기 위해 미디어 쿼리로 이것을 래핑합니다 ...

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

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

또한 마크 업의 캐럿은 필요하지 않으며 li에 대한 드롭 다운 클래스입니다 .

이것은 워드 프레스 부트 스트랩에 작동합니다 :

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

그래서 당신은이 코드를 가지고 있습니다 :

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

일반적으로 클릭 이벤트에서 작동하며 호버 이벤트에서 작동하기를 원합니다. 이것은 매우 간단합니다. JavaScript / jQuery 코드를 사용하십시오.

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

이것은 매우 잘 작동하며 여기에 설명이 있습니다. 버튼과 메뉴가 있습니다. 버튼을 가리키면 메뉴가 표시되고 버튼에서 마우스를 떼면 100ms 후에 메뉴가 숨겨집니다. 내가 왜 그것을 사용하는지 궁금하다면 메뉴 위의 버튼에서 커서를 드래그 할 시간이 필요하기 때문입니다. 메뉴에 있으면 시간이 재설정되고 원하는 시간만큼 머무를 수 있습니다. 메뉴를 종료하면 시간 초과없이 메뉴가 즉시 숨겨집니다.

이 코드를 많은 프로젝트에서 사용했는데, 사용 중에 문제가 발생하면 언제든지 질문하십시오.