我使用 Jquery.resposiveTabs 构建了一个菜单项。
我想在屏幕较小时禁用鼠标悬停事件,如果屏幕较大则重新启用它。
这是我的代码:
$(window).load(function () {
if (Modernizr.mq('(max-width: 991px)')) { // ($(window).width() <= 991)
$('a.r-tabs-anchor').off('mouseover');
}
});
$(window).resize(function () {
if (Modernizr.mq('(min-width: 992px)')) {
$('a.r-tabs-anchor').on('mouseover');
}
else if (Modernizr.mq('(max-width: 991px)')) {
$('a.r-tabs-anchor').off('mouseover');
}
});
一切正常...除了,如果我减小屏幕尺寸,鼠标悬停事件将被禁用并且事件处理程序将被解除...当我在 Off() 之后调用 On() 时,它不会将处理程序重新附加到事件。而且我不知道如何找到事件处理程序并重新附加它?
这是我的 JavaScript 初始化,它最初将鼠标悬停事件附加到 Jquery.responsivetabs 处理程序:
/*========== Tabs Responsive ==========*/
function TabsResponsive(){
if($('#tabs-responsive').length){
$('#tabs-responsive').responsiveTabs({
rotate: false,
active:0,
event: 'mouseover',
startCollapsed: 'accordion',
collapsible: 'accordion',
animation: 'slide',
duration:300,
setHash: false
});
}
}
这是我的 html 菜单:
<li class="">
<div class="product-collateral" id="tabs-responsive">
<ul class="nav-tab" id="classifiedMenu">
<li><a href="#books" aria-controls="books" data-toggle="tab">Books</a></li>
<li><a href="#sports" aria-controls="sports" data-toggle="tab">Sports</a></li>
</ul>
<div id="classifiedContent" class="tab-content overflow-auto">
<div class="tab-pane classified" id="books">
<div class="text-content">
<ul class="classified-links">
<li><a href="#">Children</a></li>
<li><a href="#">Comics</a></li>
<li><a href="#">Cookbooks</a></li>
</ul>
</div>
</div>
<div class="tab-pane classified" id="sports">
<div class="text-content">
<ul class="classified-links">
<li><a href="#">Cycling</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Football</a></li>
</ul>
</div>
</div>
</div>
</div>
最佳答案
.off() 正在从 .on() 中删除所有事件处理程序 - jQuery .off() API ,因此在运行 .off() 后,由 TabsResponsive 初始化设置的事件处理程序不再适用。
当 min-width: 992px 为真时,您只需要在调整大小函数中重新初始化 TabsResponsive()。
$(window).resize(function () {
if (Modernizr.mq('(min-width: 992px)')) {
TabsResponsive(); //Reinitialize or use other method if provided by API
}
else if (Modernizr.mq('(max-width: 991px)')) {
$('a.r-tabs-anchor').off('mouseover');
}
});
编辑:另一个想法是,为了防止您的 TabsResponsive 在不需要时不断被重写,您还可以为您的 ifs 添加一个附加条件。这样,如果用户以 1200px 加载并将大小调整为 1000px,则您不会重新初始化。类似的东西,
var responsiveTabsCheck = true;
$(window).load(function () {
if (Modernizr.mq('(max-width: 991px)')) { // ($(window).width() <= 991)
$('a.r-tabs-anchor').off('mouseover');
responsiveTabsCheck = false;
}
});
$(window).resize(function () {
if (Modernizr.mq('(min-width: 992px)') && responsiveTabsCheck === false) {
TabsResponsive(); //Reinitialize or use other method if provided by API
responsiveTabsCheck = true;
}
else if (Modernizr.mq('(max-width: 991px)') && responsiveTabsCheck === true) {
$('a.r-tabs-anchor').off('mouseover');
responsiveTabsCheck = false;
}
});
关于jquery - 使用 Off 和 On 禁用/启用 Javascript 事件,如何解除绑定(bind)和绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46626067/