【问题标题】:Submenu not showing on hover - jQuery悬停时不显示子菜单 - jQuery
【发布时间】:2017-11-11 16:20:47
【问题描述】:

https://codepen.io/grantsmith/pen/YQweRb

我正在尝试让我的品牌标题菜单、子菜单在悬停时出现。代码很长,所以用了代码笔。

我的目标是菜单中包含子项的任何“a”,并切换 .nav-dropdown 类。

也许这是错误的处理方式,欢迎提出建议。这肯定是一个 jQuery 问题,因为我对它很陌生。

(function($) {
$(function() {
$('nav ul li > a:not(:only-child)').click(function(e) {
  $(this).siblings('.nav-dropdown').toggle();
  $('.nav-dropdown').not($(this).siblings()).hide();
  e.stopPropagation();
});
$('html').click(function() {
  $('.nav-dropdown').hide();
});
});
document.querySelector('#nav-toggle').addEventListener('click', function() {
this.classList.toggle('active');
});
$('#nav-toggle').click(function() {
$('nav ul').toggle();
});
})(jQuery);

【问题讨论】:

  • 您已将事件绑定到您的点击,这可能是它未在悬停时显示的原因
  • 是的,我现在看到了,但是,当我点击任何一个时都不起作用?

标签: jquery nav submenu


【解决方案1】:

试试这个:https://codepen.io/anon/pen/KqVovo

(function($) {
  $(function() {
    $('nav>ul>li').mouseenter(function(e) {
      $(this).children('.nav-dropdown').show();
    });
    $('nav>ul>li').mouseleave(function(e) {
      $('.nav-dropdown').hide();
    });
  });
})(jQuery);

【讨论】:

  • 这更接近了,但是,子菜单不会保持打开状态以便能够选择子菜单 li's
  • 已更新。删除了很多东西,改为mouseenter()mouseleave() 以获得更多控制权。
  • 这太完美了,我还是个 javascript 新手 :(。感谢您的帮助
  • 只是作为更新,以防其他人希望使用该代码。尽管子菜单显示问题已修复。移动切换仍然存在悬停时不显示/触发的问题?
  • 什么移动切换?请记住,在移动设备上“悬停”是不可能的...
猜你喜欢
  • 1970-01-01
  • 2015-05-10
  • 1970-01-01
  • 2013-11-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-05
相关资源
最近更新 更多