호버로 부트 스트랩 드롭 다운
좋아, 그래서 내가 필요한 것은 매우 간단합니다.
몇 가지 드롭 다운 메뉴가있는 탐색 메뉴를 설정하고 (을 사용하여 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)
});
Triggering a click event with a hover has a small error. If mouse-in and then a click creates vice-versa effect. It opens when mouse-out and close when mouse-in. A better solution:
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click.
Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems
$(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>Bootstrap drop-down Work on hover, and remain close on click by adding property display:block; in css and removing these attributes data-toggle="dropdown" role="button" from button tag
.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>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
});
}
);
});
참고URL : https://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover
'Programing' 카테고리의 다른 글
| Windows 7에서 ADB가 Nexus 4를 인식하지 못함 (0) | 2020.05.28 |
|---|---|
| 라 라벨 : 기본 URL 받기 (0) | 2020.05.28 |
| onStart ()와 onResume ()의 차이점 (0) | 2020.05.28 |
| Android의 컨텍스트에서 활동 가져 오기 (0) | 2020.05.28 |
| iOS에서 사용자로부터 현재 위치를 얻는 방법 (0) | 2020.05.28 |