jQuery hide 仅适用于 Chrome Mac 和 IE，不适用于 Chrome PC 或 FF答案

【问题标题】：jQuery hide only working on Chrome Mac and IE, not Chrome PC or FFjQuery hide 仅适用于 Chrome Mac 和 IE，不适用于 Chrome PC 或 FF
【发布时间】：2016-05-09 14:57:24
【问题描述】：

我编写了一个小函数来隐藏使用 FoundationPress 作为模板的 wordpress 网站上的子菜单，不幸的是我发现它在 Chrome PC 或 FF 上不起作用。我最初使用切换来隐藏它，但切换到 .hide() 甚至将其设置为 .css("display","none") 但问题仍然存在于 PC 端。

$(document).ready(function() {
    $('.top-bar-section li.active:not(.has-form) a:not(.button)').click(function() { 
        $("li.active ul.sub-menu.dropdown").hide();
    });
    $('.top-bar-section ul li').hover(function() {
        if($("li.active ul.sub-menu.dropdown").css("display", "none")){
           $("li.active ul.sub-menu.dropdown").css("display", "block");
        }
    });
})

应该发生的情况是用户导航到网站的某个部分，然后使用顶部的菜单跳到每个部分。所以在这里：http://development.maclynutility.com/littlefriends/childrens-services/ 如果您使用菜单在当前部分（儿童服务）中的任何位置导航，则菜单在使用 Chrome 或 FF 的 PC 上保持活动状态，但在 Mac 或 IE 上隐藏。我需要它一直隐藏并像在 IE 或 Mac Chrome 上一样工作。感谢您的帮助。

【问题讨论】：

我要检查的第一件事是 $("li.active ul.sub-menu.dropdown") 是否真的找到任何东西
看起来问题出在悬停功能上，而不是点击功能中的选择器。当我注释掉第二个悬停功能时，子菜单会正确隐藏，但如果用户返回该功能，我将使用它再次显示菜单。我可以看到，一旦页面加载，显示属性会从没有像它应该的那样切换回阻止，但在 mac 上它保持隐藏状态，并且实际上显示在 pc 上，尽管属性被设置为阻止。 .hover() 在那里使用合适吗？

标签： javascript jquery css google-chrome firefox

【解决方案1】：

它不工作，因为它无法找到

li.active ul.sub-menu.dropdown

确定你的目标是什么。

【讨论】：

我很好奇为什么它适用于某些浏览器而不适用于其他浏览器。原谅我，但这是我第一次遇到这样的问题。当控制台中似乎没有实际显示错误时，如何检查类似的内容？不过我可能没找对地方。
您需要在不同的浏览器中检查不同的计算样式。

【解决方案2】：

if($("li.active ul.sub-menu.dropdown").css("display", "none")){
  $("li.active ul.sub-menu.dropdown").css("display", "block");
}

应该是：

if($("li.active ul.sub-menu.dropdown").css("display") === "none"){
  $("li.active ul.sub-menu.dropdown").css("display", "block");
}

由于$("li.active ul.sub-menu.dropdown").css("display", "none") 将始终隐藏并返回选定的 dom 元素，这些元素是“真实的”，因此将执行 if 正文，显示下拉菜单。

但是，由于它要么在隐藏时显示，要么在显示时不执行任何操作，因此与完全省略 if 语句相比，该函数基本上不会做任何不同的事情。你打算让它切换吗？或者可能在悬停时显示但之后隐藏？

【讨论】：

目的是在悬停后显示下拉菜单，并且它被第一个函数隐藏，这就是为什么我将 if 语句放在由活动菜单类触发的悬停中的原因。问题是它在 Chrome 上的显示不一致，即使显示器设置为阻止它在 Mac 或 IE 上不显示。
“活动”类何时添加到 li 中？在悬停函数中，您可以使用 $(this) 获取包含悬停的 li 的 jQuery 对象。所以也许你正在寻找 $(this).find("ul.sub-menu.dropdown").show();
这是可能的，但无论我做什么，我似乎都无法让它发挥作用。我不知道为什么即使我没有将鼠标悬停在任何东西上，hove 功能也会抵消点击功能。