Adobe Accessible Meg菜单基于浏览器宽度的更改行为

时间:2018-07-17 14:57:44

标签: javascript megamenu

我知道这可能很远。我正在使用Adobe Accessible Mega Menu。它具有可以在鼠标悬停时打开菜单或单击的设置。

https://github.com/adobe-accessibility/Accessible-Mega-Menu https://github.com/adobe-accessibility/Accessible-Mega-Menu/blob/master/js/jquery-accessibleMegaMenu.js

我想做的是,将鼠标悬停在> 1024上打开菜单,然后单击<1024打开单击。

我几乎可以正常工作,但是在调整大小时却无法正常工作。

这就是我添加的内容:

(function ($, window, document) {

"use strict";


var $window = $(window);
var NotMobile;


function checkWidth() {
    var windowsize = $window.width();

    if (windowsize > 1024) {
        //if the window is greater than 1024px 
        NotMobile = true;
        //alert(windowsize);
        //alert(NotMobile);

    }
    else {
        NotMobile = false;
        //alert(windowsize);
        //alert(NotMobile);            
    }
}

// Execute on load
checkWidth();


// Bind event listener


$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    checkWidth();
});




var pluginName = "accessibleMegaMenu",
    defaults = {
        uuidPrefix: "accessible-megamenu", // unique ID's are required to indicate aria-owns, aria-controls and aria-labelledby
        menuClass: "accessible-megamenu", // default css class used to define the megamenu styling 
        topNavItemClass: "accessible-megamenu-top-nav-item", // default css class for a top-level navigation item in the megamenu
        panelClass: "accessible-megamenu-panel", // default css class for a megamenu panel
        panelGroupClass: "accessible-megamenu-panel-group", // default css class for a group of items within a megamenu panel
        hoverClass: "hover", // default css class for the hover state
        focusClass: "focus", // default css class for the focus state
        openClass: "open", // default css class for the open state,
        toggleButtonClass: "accessible-megamenu-toggle", // default css class responsive toggle button
        openDelay: 0, // default open delay when opening menu via mouseover
        closeDelay: 250, // default open delay when opening menu via mouseover
        openOnMouseover: NotMobile
    },

我认为out功能不起作用的原因并未设置为在调整大小时再次执行,因此我可以更改变量,但不会更改设置。

0 个答案:

没有答案