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

时间: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\' );
    }
}

相关推荐

Making sub-menus exclusive

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