Question

我感觉我完全错误地绕过这个;这是小提琴：http://jsfiddle.net/qhuprcLz/

我想要做的是每当我悬停主菜单选项时，我想抓住该菜单上的数据类型集并在主菜单上设置类，然后当我将鼠标悬停在子菜单上时获取数据背景attr的菜单项，并在容器上设置背景图像。

我将网站和菜单加载到jsfiddle中，这样您就可以更好地理解我的意思。

JS：

// tablet and desktop only
    if (window.matchMedia('(min-width: 960px)').matches) {  

        // menu background
        $('.menu-menu ul li.cm-menu-item-responsive').on("mouseover", function () {
            var menuType = $(this).attr("data-type");
            var menuBackground = $(menuType + " .ty-menu__submenu-list li").attr("data-background");

            console.log("menu type:"+menuType);
            console.log("menu background:"+menuBackground);

            $(this).find("div.ty-menu__submenu").addClass(menuType);
            $(this).find("div.ty-menu__submenu").css('background-image', 'url(menu-' + menuBackground + '.png)');
        });

    }

Answer 1

我提出的解决方案如下：

// menu background
        $('.menu-menu ul li.cm-menu-item-responsive').on("mouseover", function () {
            var menuType = $(this).attr("data-type");
            $(this).find("div.ty-menu__submenu").addClass(menuType);

        });
        $('.ty-menu__submenu-list li').on("mouseover", function () {
            var menuBackground = $(this).attr("data-background");
            //console.log(menuBackground);
            $("div.ty-menu__submenu.ty-menu__submenu-to-right").addClass(menuBackground);
        });

jQuery选择菜单数据属性并设置背景图像URL

1 个答案: