在我的网站上,我使用 Bootstrap 并有一个带下拉菜单的导航菜单。
现在我添加了一些 JS 代码,以便在悬停时打开下拉菜单。
<!-- MouseOver on menu -->
$(function() {
$("li.dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
},
我还使用enquire仅在桌面上时激活此悬停效果。
<!-- Activate javascript based on mediaquery -->
$(document).ready(function() {
enquire.register("screen and (min-width:40em)", {
// If supplied, triggered when a media query matches.
match : function() {
<!-- MouseOver on menu -->
$(function() {
$("li.dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
},
// If supplied, triggered when the media query transitions from a matched state to an unmatched state.
unmatch : function() {
<!-- MouseOver on menu -->
$(function() {
$("li.dropdown").unbind("hover");
});
}
});
});
现在 enquire.js 部分工作正常。因此,当用户位于桌面上时,.hover 属性将赋予该功能。当他使用移动设备时,下面的部分就会被执行。但是,如何再次去掉这个 .hover 属性?
我正在尝试解除绑定(bind)或取消设置该功能,但这似乎不起作用。
$(function() {
$("li.dropdown").unbind("hover");
});
也许这是一个基本问题,但我不擅长 jQuery,而且我有点卡住了。
最佳答案
我检查了文档 http://api.jquery.com/hover并且需要具体的解绑方式:
$("li.dropdown").off( "mouseenter mouseleave" );
另外,我对您的具体实例可能是错误的,但您可能可以直接使用 CSS 而不是 JavaScript/Enquire。
旁注:我认为您不需要匹配/不匹配中的额外 $(function(){ ... })
包装器,因为您已经在 .ready 中执行了此操作
方法。
关于jQuery 禁用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28246930/