Question

我使用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初始化，它最初将mouseover事件附加到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>

Answer 1

.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;
    }
});

使用Off和On禁用/启用Javascript事件，如何取消绑定和绑定？

1 个答案: