我正在使用一个简单的jquery插件在Bootstrap 3中实现悬停效果的下拉菜单。它在桌面以及移动设备上均能完美运行(还原为原始的bootstrap下拉行为),但是当用户调整桌面上的浏览器窗口大小时,悬停功能仍然有效。我尝试在768px的导航栏崩溃后一起禁用所有功能。
我正在使用以下插件:https : //github.com/CWSpear/bootstrap-hover-dropdown
我最终使用以下解决方案:
$(function () {
if ($(window).width() > 768) {
$('.dropdown-toggle').dropdownHover();
}
});
但是我无法使其完美运行,现在,如果您以768px刷新页面或降低页面,则插件不会触发(鼠标单击时下拉菜单起作用),但是如果您从任何较大的页面开始缩小,它将继续触发。如果有人可以帮忙,我就差一点了。
您的函数只能在dom准备就绪时运行一次:http : //learn.jquery.com/using-jquery-core/document-ready/
最简单的解决方案是在调整窗口大小后检查这种情况
$(function () {
var $window = $(window),
$toggle = $('.dropdown-toggle'),
isActive = false;
function onResize() {
if (!isActive && $window.width() > 768) {
$toggle.dropdownHover();
isActive = true;
} else {
// stop the dropdown
isActive = false;
}
}
$window.resize(onResize);
// call once on start up
onResize();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句