移动设备的父菜单项需要两次点击

时间：2020-06-23 作者：sansae

我不知道我的父菜单项出了什么问题。我有两个手机在第一次点击移动设备时没有工作（我已经在我的android手机上进行了测试）。

为了让它看起来更具移动响应能力，我添加了一些css：

@media (max-width: 500px) {
  &.main-navigation {
    .menu-main-menu-container {
      display: none;
      position: absolute;
      width: 80%;

      ul#menu-main-menu {
        display: block;
        margin: 0;

        #menu-item-6, #menu-item-7 {          
          ul.sub-menu {
            display: none;
          }
        }

        #menu-item-6:hover, #menu-item-7:hover {
          ul.sub-menu {
            display: block;
          }
        }
      }// ul#menu-main-menu
    }// .menu-main-menu-container

    .menu-toggle {
      margin: 0;
      width: 20%;
    }

    .menu-toggle::before {
      transform: translateX(100%);
    }
  }// end &.main-navigation

  #header-search-toggle {
    display: none;
  }
}// max-width: 500px
从我的网络项目一开始就是这样。在过去的一年里，我构建了一些其他wp项目，这是第一次父菜单项在第一次单击时无法单击。有什么想法吗？这可能是因为后端的wordpress设置很奇怪吗？

2 个回复
SO网友:sansae

我找到了解决办法。

我查看了inspector，注意到在第一次单击我的父菜单项时，WordPress会附加一个；“聚焦”；为该菜单项初始化。只有在第二次单击父菜单项时，您才能进入页面。我不知道WordPress为什么会这样做。这是WordPress为其父菜单项所做的某种默认行为吗？如果有人能对此有所了解，我将不胜感激。我的菜单也没有使用任何插件。

Anyway, my solution was to .addClass "focus" using jQuery to all my parent menu items. This fixed the issue and now on my Android phone, one click of a parent menu item takes me to the page.

更新：我忘了我需要添加；“如果”；条件，否则子菜单将显示在非移动设备上，无需单击。（我相信标准是480px，但我更喜欢500px）

jQuery(document).ready(function($) {
    if ($(window).width() <= 500) {
        $("#menu-item-6, #menu-item-7").addClass("focus");
    }
});

SO网友:dreamer

我知道这是一个老帖子，但我刚刚遇到了同样的问题，我想也许它会帮助别人。要解决此问题，还可以转到导航。js（在我的情况下）并注释掉下面与添加；“聚焦”；班

* Sets or removes .focus class on an element.

function toggleFocus() {
    if ( event.type === \'focus\' || event.type === \'blur\' ) {
        let self = this;
        // Move up through the ancestors of the current link until we hit .nav-menu.
        while ( ! self.classList.contains( \'nav-menu\' ) ) {
            // On li elements toggle the class .focus.
            if ( \'li\' === self.tagName.toLowerCase() ) {
                self.classList.toggle( \'focus\' );
            }
            self = self.parentNode;
        }
    }

    if ( event.type === \'touchstart\' ) {
        const menuItem = this.parentNode;
        event.preventDefault();
        for ( const link of menuItem.parentNode.children ) {
            if ( menuItem !== link ) {
                link.classList.remove( \'focus\' );
            }
        }
        menuItem.classList.toggle( \'focus\' );
    }
}

标签： menus   小码农  

相关推荐

Making sub-menus exclusive

我真的不知道该怎么解释我在这里找的东西，我在这里找得太露骨了。在我的网站上，我有一个附带菜单，其中包含一系列子类别，每个子类别中都有一些项目。我想知道当我打开另一个子类别时，是否有办法关闭所有其他打开的子类别，例如：1. Animals ----A. Cats ----B. Dogs 2. People ----A. Samantha ----B. Daniel 当我按下“动物”时，我希望“人”关闭，反之亦