javascript - WordPress子菜单的子菜单下拉问题

Question

当您单击子 li 时，我遇到了子菜单内子菜单显示的问题。

我遇到的问题是，当您单击子 li 打开子子菜单时，它不会将相关类添加到子子菜单中。这是我正在使用的 jQuery。

$('.menu-item-has-children').on('click', function() {

    var submenu = $(this).children('.sub-menu');

    if(submenu.hasClass('menu-open')) {
        submenu.removeClass('menu-open');
      $(this).removeClass('menu-active');
    } else {
        $('.sub-menu').removeClass('menu-open');
        $('li').removeClass('menu-active');
        submenu.addClass('menu-open');
        $(this).addClass('menu-active');
    }

});

我认为这可能与当您单击不同的 li 时尝试从所有“子菜单”类中删除“菜单打开”类有关，但我对如何纠正此问题感到困惑.

这是我的 fiddle 的链接，希望比我能解释的更详细地说明我的问题。

https://jsfiddle.net/08gckq8n/

谢谢。

Answer 1

您遇到的部分问题是您尝试在 li 和所有 .sub- 上运行 on('click')菜单位于顶级父li内部。因此，无论您单击何处，您始终会单击父级(最上面的li)，因此您不会获得预期的结果。

您将遇到的另一个问题是，一旦链接生效，您将无法打开这些链接，因为您将导航到该页面，而不是打开子菜单。

下面的代码使用 toggleClass 简化了 JS，并附加了一个要单击的元素。

var $menu_item = $('.menu-item-has-children');

$menu_item.append('<span class="caret"></span>');

$('.caret').click(function() {
  $(this).parent().toggleClass('menu-open');
});

li {
  position: relative;
}

li>.caret {
  display: inline-block;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 10;
}

.caret::before {
  content: '+';
  display: block;
  width: 25px;
  height: 25px;
  text-align: center;
  font-size: 18px;
}

li.menu-open>.caret::before {
  content: '-';
  display: block;
}

.sub-menu {
  display: none;
  position: relative;
}

.menu-open>.sub-menu {
  display: block;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="site-navigation">
  <div class="menu-main-menu-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8 menu-active">
        <a href="#">Root Menu Item</a>
        <ul class="sub-menu">
          <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">
            <a href="#">Subchild item</a>
          </li>
          <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67">
            <a href="#">Subchild item</a>
          </li>
          <li id="menu-item-229" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-229">
            <a href="#">Subchild item with submenu</a>
            <ul class="sub-menu">
              <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66">
                <a href="#">Sub-subchild item</a>
              </li>
              <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65">
                <a href="#">Sub-subchild item</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

这是工作 fiddle : https://jsfiddle.net/disinfor/anbau0ya/5/

您必须为 .caret 做一些样式设置，但这将使您更接近您想要做的事情。

您还可以调整 WP 导航菜单的输出以包含插入符，但这是一个完全不同的问题/解决方案。