Question

我使用Jquery和CSS创建的子菜单有问题。

我创建了以下小提琴，以便向您展示这有什么问题：https://jsfiddle.net/kurt111078/c5xhLrho/8/

第1步：加载页面后，子菜单行为正确：当鼠标悬停在带子菜单的菜单上时，会显示子菜单。将鼠标移开后，子菜单会消失。直到这里，一切看起来都是正确的。
第二步：当我调整页面大小以查看其在较小屏幕中的行为时，在这种情况下一切正常。

当我再次将屏幕重新调整为较大的屏幕时，会出现问题。

我希望菜单的行为类似于步骤1，但即使屏幕较大，现在只有当我点击带有子菜单的菜单时才显示子菜单，这是一种不正确的行为，因为子屏幕需要更大的屏幕将鼠标移到父菜单上时显示。

你能帮我理解我的代码有什么问题吗？

真的很奇怪，因为我已经添加了一个调整大小处理程序：

        $(window).resize(resizeMenu);
     resizeMenu();
    setupMenuButton();
    setupSubMenu();
});

非常感谢

Answer 1

<强>问题

以下两条指令引用相同的元素并将显示css相互冲突。

CSS
.mynavbar li:hover > ul { display: block;}

JavaScript
function setupSubMenu() { $(".mysubmenu").toggle(); }

<强> Solution

所以基本上在你的场景中，如果你想在更大的屏幕上使用鼠标悬停效果并在较小的屏幕上点击功能，你可以通过这种方式实现：

function resizeMenu() {
    if ($(this).width() >= 500) {
        //.....
        //.....
        $(".munuwithsubmenu").hover(
           function(){ $(".mysubmenu").css({'display': 'block'}) },
           function(){ $(".mysubmenu").css({'display': 'none'}) }
         );
    }
    else if ($(this).width() < 500) {
        //.....
        //.....
       $(".munuwithsubmenu").off( "mouseenter mouseleave" );
    }
}

技巧是绑定/取消绑定mouseenter-mouseleave events。

调整Jquery响应式站点后的子菜单问题（提供的jsfiddle）

1 个答案: