반응형
Hover를 사용한 부트스트랩 드롭다운
좋아, 내가 필요한 건 꽤 간단해
: 부 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★,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');
}
}
});
Twitter Bootstrap은 구현되어 있지 않지만 이 플러그인을 사용할 수 있습니다.
업데이트 1:
Sames 질문은 이쪽
마우스를 네비게이션 항목 위로 가져가면 해당 항목이 활성화되는지 확인합니다.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>
일반적으로 클릭 이벤트에서 작동하며, 호버 이벤트에서 작동해야 합니다.이것은 매우 간단합니다.이 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();
})
})
})
이것은 매우 효과적이며, 여기에 설명이 있습니다.버튼과 메뉴가 있습니다.버튼을 마우스로 가리키면 메뉴가 표시되고, 버튼을 마우스 아웃하면 100밀리초 후에 메뉴가 숨겨집니다.내가 왜 그것을 사용하는지 궁금하다면, 버튼에서 메뉴 위로 커서를 끌어다 놓을 시간이 필요하기 때문입니다.메뉴에 올라가면 시간이 리셋되어 원하는 횟수만큼 머무르실 수 있습니다.메뉴를 종료하면 타임아웃 없이 바로 메뉴가 숨겨집니다.
저는 이 코드를 여러 프로젝트에서 사용해 왔습니다만, 사용상의 문제가 있으면 언제든지 질문해 주십시오.
이것은 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');
});
});
올바른 플러그인으로 업데이트됨
기능을 이 공개되어 있습니다.이은, 「Drupd Hover)」를 할 수 .이 플러그인은, 를 클릭했을 때에 발생하는 동작도 정의할 수 있습니다.dropdown-toggle★★★★
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
이미 많은 해결책이 있는데 왜 내가 만들었을까?
기존의 모든 솔루션에 문제가 있었습니다.는 CSS를 ..open의 .dropdown따라서 드롭다운이 표시될 때 드롭다운 토글 요소에 대한 피드백은 없습니다.
가 js를 ..dropdown-toggle이 때문에, 드롭 다운은 호버에 표시되고 나서, 열려 있는 드롭 다운을 클릭하면 숨겨집니다.마우스를 밖으로 이동하면 드롭 다운이 트리거 되어 다시 표시됩니다.에는 iOS 영향을 주는 도 있습니다.js는 iOS에 대응하고 있습니다.
그래서 저는 Bootstrap 드롭다운 호버 플러그인을 만들었습니다.이 플러그인은 해킹 없이 표준 Bootstrap javascript API만을 사용하여 이 모든 문제를 방지합니다.
이렇게 하면 부트스트랩용 호버 클래스를 만들 수 있습니다.
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>
온클릭이 열려 있는 것을 삭제하려면 , 버튼 속성 data-timeout="time"을 삭제하는 것을 잊지 말아 주세요.드롭다운과 함께 입력이 추가되어 있는 경우에도 이 조작이 가능합니다.
페이드인 페이드아웃 애니메이션과 함께 호버 기능을 사용하여 시도합니다.
$('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);
});
모바일 디바이스가 아닌 경우에만 네비게이션 바를 움직입니다. 왜냐하면 모바일 디바이스에서는 네비게이션이 제대로 작동하지 않기 때문입니다.
$( 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="class"를 추가한 것으로 가정하고 타임아웃을 추가했습니다.
var hoverTimeout;
$('.dropdown').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('open');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('open');
}, 150);
});
의 click( 「」가 붙은 )hover에러가 조금 있습니다. ifmouse-in에 를를 를를를 andclick반작용이 생깁니다.opens 때mouse-out ★★★★★★★★★★★★★★★★★」close 때mouse-in 해결책
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
부트스트랩 드롭다운 호버 위에서 작업하고 css에서 속성 표시: block을 추가하고 버튼 태그에서 이러한 특성을 제거하여 클릭 시 근접 상태를 유지합니다.
.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</button>
<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> $('.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)
});
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>
쿼리
$(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
});
}
);
});
하다를 사용하세요.mouseover()클릭을 트리거하는 기능.이렇게 하면 이전 클릭 이벤트가 손상되지 않습니다.사용자는 호버와 클릭/터치를 모두 사용할 수 있습니다.이동하기 편리할 것입니다.
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})
Bootstrap 5.x에서는 다음과 같은 커스텀클래스를 추가할 수 있습니다.dropdown-hover메인 드롭다운 요소로 이동합니다.그런 다음 JQuery별로 호버 이벤트를 관리합니다.
$( document ).ready(function() {
// Add hover action for dropdowns
let dropdown_hover = $(".dropdown-hover");
dropdown_hover.on('mouseover', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.addClass('show');
toggle.addClass('show').attr('aria-expanded', true);
});
dropdown_hover.on('mouseout', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.removeClass('show');
toggle.removeClass('show').attr('aria-expanded', false);
});
});<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-5">
<div class="dropdown dropdown-hover">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
</div>
</body>
</html>제가 제안하는 솔루션은 터치 장치가 아닌지를 감지하고navbar-toggle(메뉴 표시)는 표시되지 않으며 상위 메뉴 항목을 마우스 포인터로 가리키고 링크를 클릭해서 따라갑니다.
또한 일부 브라우저의 메뉴와 네바 사이의 공백으로 인해 하위 항목으로 이동할 수 없기 때문에 tne 마진 상위 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>Jquery를 사용하여 다음 기능을 구현합니다.
$('.dropdown').on('mouseover', function(){
$(this).addClass('show');
$('.dropdown-menu').addClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'true');
});
$('.dropdown').on('mouseout', function(){
$(this).removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'false');
});
테스트 완료, 정상적으로 동작
<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
<div class="container" style="width:100%;">
<div class="navbar-header" style="height:90px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
<img src="material/logo.png" width="160px;" alt="visoka">
</a>
<a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
<img src="material/logo.png" width="200px;">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
<ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">
<li><a href="index.html" style="font-family: Inter !important;">HOME</a></li>
<li><a href="About-Us.html" style="font-family: Inter !important;">ABOUT US</a></li>
<li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
<a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Projects.html#ongoing" style="font-family: Inter !important;">Ongoing Projects</a></li><br>
<li><a href="Projects.html#completed" style="font-family: Inter !important;">Completed Projects</a></li><br>
<li><a href="Projects.html#upcoming" style="font-family: Inter !important;">Upcoming Projects</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}
function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>
jquery 버전을 사용하는 부트스트랩 5
추가만 하면 됩니다.hoverablemain javascript 파일에 class to 드롭다운 및 아래 코드 추가
// Hoverable dropdown
$('.dropdown.hoverable').on({
mouseenter: function(){
var dropdown = $(this).children('.dropdown-menu');
if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
},
mouseleave: function(){
var dropdown = $(this).children('.dropdown-menu');
if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
}
});
언급URL : https://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover
반응형
'programing' 카테고리의 다른 글
| PHP를 사용하여 사이트 간 요청 위조(CSRF) 토큰을 올바르게 추가하는 방법 (0) | 2022.10.08 |
|---|---|
| panda DataFrame 열에 있는 NaN 값은 어떻게 계산합니까? (0) | 2022.10.08 |
| WordPress에서 사용하는 해시 유형은 무엇입니까? (0) | 2022.10.08 |
| 마리아DB의 utf8은 아직 utf8mb3인가요? (0) | 2022.10.08 |
| java.displaces를 클릭합니다.ClassNotFoundException: com.mysql.jdbc.드라이버 인 이클립스 (0) | 2022.10.08 |