如何创建jquery函数，在启用javascript时覆盖css悬停？_Javascript_Jquery_Html_Css_Jquery Selectors

如何创建jquery函数，在启用javascript时覆盖css悬停？

javascript jquery html css

如何创建jquery函数，在启用javascript时覆盖css悬停？,javascript,jquery,html,css,jquery-selectors,Javascript,Jquery,Html,Css,Jquery Selectors,我已经建立了一个纯css下拉菜单，它的工作非常完美。现在它只在悬停在上方时才起作用。将鼠标悬停在#headerNav上会导致my.dropdownMenu的菜单下拉，一旦光标离开dropdownMenu或#headerNav，菜单就会消失因为我想让启用了js的用户有更好的体验，所以我决定使用一些jquery来获得与之相同的效果。这基本上保持了下拉菜单打开后，点击和点击只有不悬停默认情况下，我已将.dropdownMenu设置为“display:none”，然后要显示下拉菜单，我有如下内容：

我已经建立了一个纯css下拉菜单，它的工作非常完美。现在它只在悬停在上方时才起作用。将鼠标悬停在#headerNav上会导致my.dropdownMenu的菜单下拉，一旦光标离开dropdownMenu或#headerNav，菜单就会消失

因为我想让启用了js的用户有更好的体验，所以我决定使用一些jquery来获得与之相同的效果。这基本上保持了下拉菜单打开后，点击和点击只有不悬停

默认情况下，我已将.dropdownMenu设置为“display:none”，然后要显示下拉菜单，我有如下内容：

#headerNav:hover .dropdownMenu {

        display:block;


        //more code


}

$(document).ready(function(){
  $('#headerNav .dropDownMenu').hover(function() {
    $(this).show();
  });

  $('*:not(#headerNav .dropDownMenu)').click(function() {
    event.stopPropagation();
    $("#headerNav .dropDownMenu").hide();
  });
});

这是我的html:

<header>
  <div id='headerContent'>
    <div id='LogoHolder'>
    </div>
    <nav id='headerNav'>
      <ul>
        <li id='photoThumbnail'></li>
        <li id='currentUser'>
          <ul class="dropdownMenu">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
            <li>link4</li>
            <li>link5</li>
            <li>link6</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>






链接1
链接2
链接3
链接4
链接5
链接6

我已经做了两天的实验了，但似乎没有办法做到这一点。如果能提供一些清晰的例子，我将不胜感激。谢谢

亲切问候

不要通过它的ID来瞄准你的导航，给它添加一个类，比如说

悬停导航

，并相应地更新你的CSS：

.hover导航：hover.dropdown菜单

然后在javascript中从

ul

$（#headerNav'）.removeClass（'hover-nav'）
并使用您的点击显示插件，因为你通常会
 不要通过导航ID来定位导航，而是在导航中添加一个类，比如说hover nav
，并相应地更新CSS：
.hover导航：hover.dropdown菜单

然后在javascript中从ul

$（#headerNav'）.removeClass（'hover-nav'）
并使用您的点击显示插件，因为你通常会
 您的CSS是。下拉菜单
您的Html是class=“下拉菜单”

CSS区分大小写。
您的CSS是。下拉菜单
您的Html是class=“下拉菜单”

CSS区分大小写。
内森击中了它的头部。我将继续粘贴代码，因为我已经快完成了
CSS
#headerNav .hideable{ display:none; }
#headerNav:hover .hideable{ display:block; }

HTML（只需将hiddeable
添加到您的UL
）
将上述内容替换为jQuery，以添加在单击其他任何位置时关闭菜单的功能
内森击中了他的头。我将继续粘贴代码，因为我已经快完成了
CSS
#headerNav .hideable{ display:none; }
#headerNav:hover .hideable{ display:block; }

HTML（只需将hiddeable
添加到您的UL
）
将上述内容替换为jQuery，以添加在单击其他任何位置时关闭菜单的功能
试着这样做：
#headerNav:hover .dropdownMenu {

        display:block;


        //more code


}

$(document).ready(function(){
  $('#headerNav .dropDownMenu').hover(function() {
    $(this).show();
  });

  $('*:not(#headerNav .dropDownMenu)').click(function() {
    event.stopPropagation();
    $("#headerNav .dropDownMenu").hide();
  });
});

试着这样做：
#headerNav:hover .dropdownMenu {

        display:block;


        //more code


}

$(document).ready(function(){
  $('#headerNav .dropDownMenu').hover(function() {
    $(this).show();
  });

  $('*:not(#headerNav .dropDownMenu)').click(function() {
    event.stopPropagation();
    $("#headerNav .dropDownMenu").hide();
  });
});

我认为处理启用/禁用javascript最优雅的方法是添加：
<html class='no-js'>

仅针对禁用javascript的用户
请参阅：了解更多详细信息。
我认为处理启用/禁用javascript最优雅的方法是添加：
<html class='no-js'>

仅针对禁用javascript的用户
请参阅：了解更多详细信息。
希望这对您有帮助，希望这对您有帮助，我稍微整理了一下小提琴，将动作添加到currentUser
，而不是headerNav
。我将尝试一下，然后返回报告。我查看了jfiddle链接，想知道如果屏幕上的任何地方也被点击，而不仅仅是实际的按钮，是否有办法使菜单也消失？我还需要headerNav上的操作，而不是当前用户，因为headerNav就像一个包装器，用来保存当前用户的用户名和缩略图。当它在上面滚动时，它会像一个大按钮一样亮起，整个区域都可以单击，而不仅仅是用户的用户名。将headerNav
放回JSFIDLE，并添加了“如果单击其他任何地方，则关闭”所需的代码对于JSFIDLE和上面的答案。我稍微整理了一下小提琴，将动作附加到currentUser
而不是headerNav
。我会尝试一下，然后再报告。我查看了jfiddle链接，想知道如果屏幕上的任何地方也被点击，而不仅仅是实际的按钮，是否有办法使菜单也消失？我还需要headerNav上的操作，而不是当前用户，因为headerNav就像一个包装器，用来保存当前用户的用户名和缩略图。当它在上面滚动时，它会像一个大按钮一样亮起，整个区域都可以点击，而不仅仅是用户的用户名。将headerNav
放回JSFIDLE，并在JSFIDLE和上面的答案中添加了“如果点击了其他地方，则关闭”所需的代码。您好，更正了它，但这是一个旧的复制和粘贴版本的代码，我目前正在使用的更正。谢谢你的点评。嗨，更正了它，但这是我目前使用的代码的旧拷贝和粘贴版本。谢谢你的点评。第一部分用来阻止悬停上的下拉菜单。感谢第一部分为停止鼠标悬停时显示的下拉菜单所做的工作。感谢伟大的解决方案，因为我已经使用了Modernizer。现在我不用担心悬停的影响就可以处理js了，因为它只有在js被禁用的情况下才会生效。很好的解决方案，因为我已经使用了Modernizer。现在我可以不用担心悬停的影响来处理js了，因为它只有在js被禁用的情况下才会生效。