호버로 부트 스트랩 드롭 다운

좋아, 그래서 내가 필요한 것은 매우 간단합니다.

몇 가지 드롭 다운 메뉴가있는 탐색 표시 줄을 설정하고 (사용 class="dropdown-toggle" data-toggle="dropdown") 잘 작동합니다.

문제는 " onClick" 작동하지만 " " 작동 하면 선호합니다 onHover.

이 작업을 수행하는 기본 제공 방법이 있습니까?

가장 쉬운 해결책은 CSS입니다. 다음과 같은 것을 추가하십시오 ...

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

일 바이올린

가장 좋은 방법은 호버로 부트 스트랩 클릭 이벤트를 트리거하는 것입니다. 이런 식으로 여전히 터치 장치 친화적 인 상태를 유지해야합니다

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

jQuery의 호버 기능을 사용할 수 있습니다.

open마우스가 들어갈 때 클래스를 추가하고 마우스가 드롭 다운을 떠날 때 클래스를 제거하면됩니다.

내 코드는 다음과 같습니다.

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

jQuery를 사용하는 쉬운 방법은 다음과 같습니다.

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

CSS의 경우 클릭하면 미쳐갑니다. 이것은 내가 사용하는 코드이며 모바일보기를 위해 아무것도 변경하지 않습니다.

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

트위터에서 부트 스트랩 은 구현되지 않지만 this 플러그인을 사용할 수 있습니다

업데이트 1 :

여기에 같은 질문

탐색 항목 위에 마우스를 올려 놓으면 탐색 항목이 활성화되어 있음을 알 수 있습니다. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

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

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

일반적으로 클릭 이벤트에서 작동하며 호버 이벤트에서 작동하기를 원합니다. 이것은 매우 간단합니다.이 자바 스크립트 / 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 후에 메뉴가 숨겨집니다. 내가 왜 그것을 사용하는지 궁금하다면 메뉴 위의 버튼에서 커서를 드래그 할 시간이 필요하기 때문입니다. 메뉴에 있으면 시간이 재설정되고 원하는 시간만큼 머무를 수 있습니다. 메뉴를 종료하면 시간 초과없이 메뉴가 즉시 숨겨집니다.

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

이것은 jQuery로 마우스를 가져 가면 드롭 다운하는 데 사용하는 것입니다.

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

fadein fadeout 애니메이션과 함께 호버 기능을 사용하여 이것을 시도하십시오

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

부트 스트랩을위한 자신의 호버 클래스를 만드는 데 도움이됩니다.

CSS :

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

여백은 원하지 않는 닫기를 피하도록 설정되며 선택 사항입니다.

HTML :

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

onclick open 을 제거하려면 버튼 속성 data-toggle = "dropdown" 을 제거하는 것을 잊지 마십시오 . 입력에 드롭 다운이 추가 될 때도 작동합니다.

모바일 장치에 있지 않을 때 탐색 표시 줄을 가리키면 탐색으로 마우스를 가져 가면 모바일 장치에서 제대로 작동하지 않습니다.

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

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

});

다른 솔루션을 시도하고 있습니다. 부트 스트랩 3을 사용하고 있지만 드롭 다운 메뉴가 너무 빨리 닫히면 이동합니다.

li에 class = "dropdown"을 추가한다고 가정하고 시간 초과를 추가했습니다.

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});

적절한 플러그인으로 업데이트

드롭 다운 호버 기능에 적합한 플러그인을 게시했습니다. dropdown-toggle요소를 클릭 할 때 발생하는 일을 정의 할 수도 있습니다 .

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

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

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

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

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

    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

로 click이벤트를 트리거하면 hover약간의 오류가 있습니다. 그렇다면 mouse-ina는 click그 반대의 효과를 만듭니다. 그것은 및 . 더 나은 해결책 :opensmouse-outclosemouse-in

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

html

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div> 

jquery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

코드 펜

그 장치를 만지지하고 있다고하면 내가 검출을 제안하고이 솔루션 navbar-toggle(햄버거 메뉴)가 표시되지 않는 부모 메뉴 항목을 만드는 호버에 계시 하위 메뉴 및 및 클릭에 해당 링크를 따라 .

탐색 표시 줄과 일부 브라우저의 메뉴 사이의 간격으로 하위 항목으로 마우스를 가져갈 수 없으므로 tne margin-top 0

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

부트 스트랩 드롭 다운 호버 작업을 수행하고 속성 표시 를 추가하여 클릭시 가까이 유지하십시오 . CSS 에서 버튼 태그에서 data-toggle = "dropdown" role = "button" 속성 제거

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

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>