0
부트 스트랩 메뉴 항목을 클릭 할 때 호버에 표시 할 수있는 코드가 있습니다. (나는 그 점 외에는 약간을 알고 있지만 그것의 고객 요구 사항). 그것은 잘 작동하지만 자동으로 표시하는 대신 약간의 지연을 원하기 때문에 너무 짜증나지 않을 것입니다. 여기부트 스트랩 호버 메뉴의 시간 지연 설정
@media (min-width: 768px) {
.navbar-nav .caret {
display: none;
}
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: white;
background: none;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #969696;
background: none;
}
.navbar-default .navbar-nav > .hovernav > a {
color: white;
}
.navbar-inverse .navbar-nav > .hovernav > a {
color: #969696;
}
.navbar-default .navbar-nav > .hovernav:hover > a,
.navbar-default .navbar-nav > .hovernav:hover > a:hover,
.navbar-default .navbar-nav > .hovernav:hover > a:focus {
color: #333;
background: transparent;
}
.navbar-inverse .navbar-nav > .hovernav:hover > a,
.navbar-inverse .navbar-nav > .hovernav:hover > a:hover,
.navbar-inverse .navbar-nav > .hovernav:hover > a:focus {
color: #fff;
background: transparent;
}
.navbar-default .navbar-nav > li:hover {
background: #e7e7e7;
}
.navbar-inverse .navbar-nav > li:hover {
background: #080808;
}
.navbar-nav .hovernav:hover > .dropdown-menu {
display: block;
}
}
그리고 내 자바 스크립트는 다음과 같습니다 :
여기 내 CSS입니다
$(document).ready(function ($, window, delay) {
var mq = window.matchMedia('(min-width: 768px)');
if (mq.matches) {
$('ul.navbar-nav li').addClass('hovernav');
} else {
$('ul.navbar-nav li').removeClass('hovernav');
};
if (matchMedia) {
var mq = window.matchMedia('(min-width: 768px)');
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
$('ul.navbar-nav li').addClass('hovernav');
} else {
$('ul.navbar-nav li').removeClass('hovernav');
}
};
});