在导航菜单中禁用“寄生”link 行为

Question

我已经安装了 JetOne 主题的 Worpress 网站

当我单击主导航菜单中的根菜单元素以打开其项目时（links 在该根元素中）单击所选 link（根元素）的操作也触发了事情。问题出现在该主题的移动视图上。我已经试过了

@media (max-width: 768px) {
  .ct-main-navigation > .menu-item > a {
    pointer-events: none;
  }
}

但是这个技巧只是禁用了菜单根元素的 link。如何以正确的方式实现目标？

还有一个想法：使用 wp_nav_menu_items 挂钩重新创建导航，但我不想破坏原始设计，也不知道该怎么做.

HTML

<nav id="ct-main-nav__wrapper" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul id="menu-menu" class="ct-main-navigation"><li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"><a href="https://demo.curlythemes.com/private-jet/services/">Services</a>
<ul class="sub-menu">
<li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333"><a href="https://demo.curlythemes.com/private-jet/services/private-jet-2/">Private Jet Charters</a></li>
<li id="menu-item-409" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-409"><a href="https://demo.curlythemes.com/private-jet/services/business-jets/">Business Jets Charters</a></li>
<li id="menu-item-410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-410"><a href="https://demo.curlythemes.com/private-jet/services/helicopter-charters/">Helicopter Charters</a></li>
<li id="menu-item-408" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-408"><a href="https://demo.curlythemes.com/private-jet/services/air-taxi-services/">Air Taxi Services</a></li>
</ul>
</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-78"><a href="https://demo.curlythemes.com/private-jet/about-us/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-299" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-299"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-values">Our Values</a></li>
<li id="menu-item-300" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-300"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-history">Our History</a></li>
<li id="menu-item-301" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-301"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-fleet">Our Fleet</a>
<ul class="sub-menu">
<li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">CESSNA 208 GC</a></li>
<li id="menu-item-304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">DE HAVILLAND DHC-8-200</a></li>
<li id="menu-item-396" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-396"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">BOMBARDIER JET 200</a></li>
<li id="menu-item-397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-397"><a href="https://demo.curlythemes.com/private-jet/about-us/aircraft/">EMBRAER 175</a></li>
</ul>
</li>
<li id="menu-item-302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-302"><a href="http://demo.curlythemes.com/private-jet/about-us/#our-team">Our Team</a></li>
</ul>
</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="https://demo.curlythemes.com/private-jet/empty-legs/">Empty Legs</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="https://demo.curlythemes.com/private-jet/news/">News</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="https://demo.curlythemes.com/private-jet/contact/">Contact</a></li>
</ul> </nav>

原版CSS

.ct-main-navigation .menu-item-has-children > a::before,
.ct-main-navigation .page_item_has_children > a::before {
  content: "";
  position: relative;
  font-family: 'themify';
  display: inline-block;
  -webkit-transition: opacity 100ms ease-in;
   transition: opacity 100ms ease-in; 
}

.ct-main-navigation .menu-item-has-children > a::before,
.ct-main-navigation .page_item_has_children > a::before {
  float: right;
  margin: 0 0.5rem;
  display: inline-block; }
  @media (min-width: 48em) {
    .ct-main-navigation .menu-item-has-children > a::before,
    .ct-main-navigation .page_item_has_children > a::before {
      font-size: 0.5rem;
      line-height: 2.25;
      margin-right: 0; 
      } }

@media (min-width: 576px) {
  .ct-main-navigation .menu-item .menu-item-has-children > a::before,
  .ct-main-navigation .page_item .page_item_has_children > a::before {
    content: '\e649';
    line-height: 2.2;
    } }

.ct-main-navigation a {
  text-decoration: none;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  display: block;
  padding: 0.25rem 0; }

P.S。主题问题的另一个解决方法是 CSS 如下

修改CSS

@media (max-width: 768px) {
  .ct-main-navigation .menu-item-has-children::before,
  .ct-main-navigation .page_item_has_children::before {
    position: absolute;
    right: 0px;
    height: 100%;
    padding-right: 10px;
    padding-top: 7px;
    top: 0;
    z-index: 5;
    width: 40px;
    text-align: right;
    content: '';
    font-family: 'themify';
    display: inline-block;
    -webkit-transition: opacity 100ms ease-in;
    transition: opacity 100ms ease-in;
  }
  .ct-main-navigation .menu-item-has-children > a::before,
  .ct-main-navigation .page_item_has_children > a::before {
    display: none;
  }
}

如何使修复不仅适用于 Android 设备，而且适用于 iOS？

当前 CSS 修复破坏了 iPad(iOS) 设备上的导航菜单标记。

Answer 1

根据要求，这是一个可能的解决方案的最小示例：

const icon = document.querySelector('.chevron-down');

/* for mobile devices you may also use "touchend" event */
icon.addEventListener('click', (e) => {
  const subMenu = e.currentTarget.nextElementSibling;

  subMenu.style.display = 'block'
});

ul {
  list-style: none;
}

ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

i.chevron-down:before {
  content: "";
  position: relative;
  font-family: themify;
  display: inline-block;
  -webkit-transition: opacity 100ms ease-in;
  transition: opacity 100ms ease-in;
  font-style: normal;
}

.sub-menu {
  display: none;
  flex-basis: 100%;
}

<ul>
  <li>
    <a href="https://demo.curlythemes.com/private-jet/services/">Services</a>
    <i class="chevron-down"></i>
    <ul class="sub-menu">
      <li>Private etc.</li>
    </ul>
  </li>
</ul>

这不是一个完全有效的解决方案，需要进行调整，但它应该可以帮助您入门。

在导航菜单中禁用“寄生”link 行为

Disable “parasitic” link behaviour at navigation menu

html

css

wordpress

pseudo-class