부트 스트랩 3 : navbar에서 드롭 다운 링크의 헤드를 클릭 할 수있게 만드는 방법
기본 navbar를 사용하고 있으며 몇 가지 목록 항목은 드롭 다운입니다. 드롭 다운을 실행하는 링크를 클릭 할 수 없습니다. 드롭 다운에 중복 링크를 추가 할 수 있다는 것을 알고 있지만 그보다는 원하지 않습니다. 헤드 링크를 클릭 가능한 링크로 만들 수 있습니까 (드롭 다운 핸들이 아님)?
참고로 아래 드롭 다운의 첫 번째 링크를 참조하세요. 사용자가 클릭하여 실제로 가리키는 페이지로 이동할 수 있기를 바랍니다.
<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
<div class="navbar-header">...</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
I DONT WORK! <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/page2">Page2</a></li>
</ul>
</li>
<li><a href="#">I DO WORK</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
여기에 마우스 오버시 하위 메뉴를 아래로 슬라이드하고 클릭하면 페이지로 리디렉션되는 코드가 있습니다.
방법 :class="dropdown-toggle" data-toggle="dropdown" 태그에서 제거하고 CSS를 추가합니다.
다음은 jsfiddle 의 데모 입니다. 데모의 경우 부트 스트랩 CSS로 인한 드롭 다운을 보려면 jsfiddle의 스플리터를 조정하십시오. jsfiddle은 새 페이지로 리디렉션 할 수 없습니다 .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<style type='text/css'>
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
<div class="navbar-header">...</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="http://stackoverflow.com/">Stack Overflow <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/page2">Page2</a>
</li>
</ul>
</li>
<li><a href="#">I DO WORK</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</body>
</html>
disabled앵커에 클래스 를 추가하기 만하면됩니다 .
<a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>
그리고 당신은 자유롭게 갈 수 있습니다.
다음은 약간의 jQuery를 사용하는 Bootstrap 3.3을 기반으로 한 작은 해킹입니다.
열린 드롭 다운 메뉴를 클릭하면 링크가 실행됩니다.
$('li.dropdown').on('click', function() {
var $el = $(this);
if ($el.hasClass('open')) {
var $a = $el.children('a.dropdown-toggle');
if ($a.length && $a.attr('href')) {
location.href = $a.attr('href');
}
}
});
1 : 드롭 다운 트리거 제거 :
data-toggle="dropdown"
2 : 이것을 CSS 추가
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0px;
}
이것을 어떻게 우연히 사람들을 위해 게시
나는 이것이 조금 오래되었다는 것을 알고 있지만 최근 비슷한 해결책을 찾는 동안 이것을 발견했습니다. 호버 이벤트에 의존하는 것은 반응 형 디자인에 좋지 않으며 특히 모바일 / 터치 스크린에서 끔찍합니다. 결국 dropdown.js 파일을 약간 편집하여 메뉴 항목을 클릭하여 메뉴를 열 수 있으며 메뉴 항목을 다시 클릭하면 따라갈 수 있습니다.
이것의 좋은 점은 호버링에 전혀 의존하지 않기 때문에 터치 스크린에서 여전히 훌륭하게 작동한다는 것입니다.
여기에 게시했습니다 : https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js
도움이 되었기를 바랍니다.
CSS / JS를 추가 할 필요가 없습니다. (테스트 됨)
data-toggle="dropdown"- 대한 클릭 가능한이 (물론 웹으로 모바일을 사용할 수 있습니다)data-hover="dropdown"- 대한 호버 (. 웹 전용 Cz에 모바일이 기능이 없습니다HOVER)
모바일에서도 잘 작동합니다. :)
Clickable ( data-toggle="dropdown")에 대한 코드 예제
/*!
* this CSS code just for snippet preview purpose. Please omit when using it.
*/
#bs-example-navbar-collapse-1 ul li {
float: left;
}
#bs-example-navbar-collapse-1 ul li ul li {
float: none !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="" href="">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
subnav1
</a>
<ul class="dropdown-menu">
<li><a href="">Sub1</a></li>
<li><a href="">Sub2</a></li>
<li><a href="">Sub3</a></li>
<li><a href="">Sub4</a></li>
<li><a href="">Sub5</a></li>
<li><a href="">Sub6</a></li>
</ul>
<div class="clear"></div>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
subnav2
</a>
<ul class="dropdown-menu">
<li><a href="">Sub1</a></li>
<li><a href="">Sub2</a></li>
<li><a href="">Sub3</a></li>
<li><a href="">Sub4</a></li>
<li><a href="">Sub5</a></li>
<li><a href="">Sub6</a></li>
</ul>
<div class="clear"></div>
</li>
</ul>
</div>
<br>
<br>
<p><b>Please Note:</b> added css code not related to Bootstrap navigation. It's just for snippet preview purpose </p>산출
다음은 헤더에 JQuery를 사용하고 모바일에서 작동하는 솔루션입니다.
모바일에서 상단 링크에는 두 개의 탭이 필요합니다. 하나는 메뉴를 드롭 다운하고 다른 하나는 링크로 이동합니다.
$(function(){
$('.dropdown-toggle').click(
function(){
if ($(this).next().is(':visible')) {
location.href = $(this).attr('href');;
}
});
});
});앵커에 비활성화 된 클래스를 추가하십시오 . 다음은 js입니다.
$('.navbar .dropdown-toggle').hover(function() {
$(this).addClass('disabled');
});
그러나 이것은 모바일 친화적이지 않으므로 모바일 용 비활성화 된 클래스 를 제거해야 하므로 업데이트 된 js 코드는 다음과 같습니다.
$('.navbar .dropdown-toggle').hover(function() {
if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
else { $(this).removeClass('disabled'); }
});
이 문제에 대한 빠른 답변을 원하는 사람은 여기에 도착합니다. bootstrap.js (또는 dropdown.js)의 "Dropdown.prototype.toggle"함수를 다음으로 바꿉니다.
Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
var relatedTarget = { relatedTarget: this }
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown', relatedTarget)
$this.focus()
}
else
{
var href = $this.attr("href").trim();
if (href != undefined && href != " javascript:;")
window.location.href = href;
}
return false
}
두 번째 클릭 (예 : 메뉴 항목에 "open"클래스가있는 경우)에서 href가 정의되지 않았는지 또는 "javascript :;"로 설정되었는지 먼저 확인합니다. 당신의 즐거운 길을 보내기 전에.
즐겨!
이렇게하면 드롭 다운이 열릴 때 최상위 메뉴에있는 링크가 활성화되고 닫히면 비활성화됩니다. 단, 모바일 장치에서 드롭 다운 외부를 두 번 "탭"해야하는 유일한 단점이 있습니다.
$(document).on("page:load", function(){
$('body').on('show.bs.dropdown', function (e) {
$(e.relatedTarget).addClass('disabled')
});
$('body').on('hide.bs.dropdown', function (e) {
$(e.relatedTarget).removeClass('disabled')
});
});
참고 이 "표준"마크 업 및 Turbolinks (레일)을 가정합니다. $ (document) .ready (...)로 시도 할 수 있습니다.
또는 다음은 간단한 jQuery 솔루션입니다.
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
i know its too late but anyone who came here for help now you can see this post .There are two options either use css/ JavaScript and if you use css it will be applicable to devices greater that 769px width for clickable top menu, that will be work perfectly f
See here for article
Most of the above solutions are not mobile friendly.
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>This worked in my case:
$('a[data-toggle="dropdown"]').on('click', function() {
var $el = $(this);
if ( $el.is(':hover') ) {
if ( $el.length && $el.attr('href') ) {
location.href =$el.attr('href');
}
}
});
This works for me:
$('.navbar-collapse .dropdown-toggle').hover(function() {
if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
else { $(this).removeClass('disabled'); }
});
$( window ).on( "orientationchange", function( event ) {
$('.navbar-collapse .dropdown-toggle').click(function() { $(this).removeClass('disabled'); });
});
'IT Share you' 카테고리의 다른 글
| UITapGestureRecognizer를 사용할 때 탭한 자식보기 찾기 (0) | 2020.11.09 |
|---|---|
| 소수 N이 주어지면 다음 소수를 계산할까요? (0) | 2020.11.09 |
| 자바 8 : 스트림 API로 목록 병합 (0) | 2020.11.09 |
| 내 XML 파일에서 BOM 문자를 제거하는 방법 (0) | 2020.11.09 |
| INSERT INTO .. ON DUPLICATE KEY UPDATE for multiple items (0) | 2020.11.09 |