Question

我们有一个wordpress博客：https://themerkle.com，自从我记得以来，下拉菜单都有这个错误。如果您在菜单之间快速地来回徘徊，您会注意到该工件。菜单不会关闭，将保持打开状态，但显示为空白。

我们的菜单有什么问题？这是导致这种情况的过渡吗？我们怎么能解决它？我不介意摆脱过渡，如果这意味着摆脱神器。

Answer 1

function mtsDropdownMenu() {
    var wWidth = $(window).width();
    if(wWidth > 865) {
        $('.navigation ul.sub-menu, .navigation ul.children').hide();
        $('.navigation li').hover( 
          function() {
            $(this).children('ul.sub-menu, ul.children').slideDown('fast');
          },
          function() {
          $(this).children('ul.sub-menu, ul.children').hide();
          }
        );
    } else {
        $('.navigation li').unbind('hover');
        $('.navigation li.active > ul.sub-menu, .navigation li.active > ul.children').show();
    }
}

您正在使用setTimeout和timer来清除实例。这段代码是异步的。我相信这会引起奇怪的行为。像这样重写没有计时器和延迟。如果这样可以解决它，请告诉我。

Answer 2

您在白色背景上有白色文字。

请参阅截图，正如我在评论中所说，它可能是您设置菜单中的JS设置，您可以尝试用!important

覆盖它

关闭该风格

如果您不知道自己拥有什么主题以及它有哪些选项，并且通常无法访问这些文件，那么确切地说如何更改它将会有点难以理解。但过度消除它可能有用，或者这可能会指出你正确的道路。

作为一个注释，使用浏览器调试菜单调试它非常容易，正如您在屏幕截图中看到的那样，在大多数浏览器中通常为f12。

希望它有所帮助。

Answer 3

根据鼠标的移动速度，您可能会在预期关闭后打开菜单。您的方法应该删除超时，如下所示：

function mtsDropdownMenu() {
  var wWidth = $(window).width();
  if(wWidth > 865) {
      $('.navigation ul.sub-menu, .navigation ul.children').hide();
      var timer;
      var delay = 100;
      $('.navigation li').hover( 
        function() {
          var $this = $(this);
          $this.children('ul.sub-menu, ul.children').slideDown('fast');
        },
        function() {
          $(this).children('ul.sub-menu, ul.children').hide();
        }
      );
  } else {
      $('.navigation li').unbind('hover');
      $('.navigation li.active > ul.sub-menu, .navigation li.active > ul.children').show();
  }
}

我们的菜单出了什么问题？

3 个答案: