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时尝试从所有'子菜单'类中删除'menu-open'类有关，但我对如何纠正这个问题感到困惑

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

https://jsfiddle.net/08gckq8n/

感谢。

Answer 1

您遇到的部分问题是，您尝试在on('click')上运行li，而您的所有.sub-menus都在顶级父级li中。因此，无论您点击何处，都始终点击父级（最高li），因此您无法获得所期望的结果。

您将遇到的另一个问题是，在您的链接生效后，您将无法打开这些链接，因为您将导航到该页面，而不是打开sub-menus。

此代码使用toggleClass简化了您的JS，并附加了一个要点击的元素。

＆＃13;

var $menu_item = $('.menu-item-has-children');

$menu_item.append('<span class="caret"></span>');

$('.caret').click(function() {
  $(this).parent().toggleClass('menu-open');
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这是工作小提琴： https://jsfiddle.net/disinfor/anbau0ya/5/

你必须为.caret做一些造型，但这会让你更接近你想做的事。

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

Answer 2

代码存在一些问题，但您的方向正确。

click事件的选择器设置为.menu-item-has-children，在代码中有两个这样的元素，层次结构中的上层元素（让我们称之为＆＃34; li wrapper＆＃34;）wrap all如果要一次单击每个元素，菜单链接会出现问题。看一下窗口右侧的截图，蓝色部分是li包装元素区域，每次你点击菜单中的一些链接你也会点击li包装元素，这样你就会得到两个元素。事件而不是一个。

现在让我们仔细看看代码：

$('.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');
        }

    });

点击子.menu-item-has-children元素submenu变量将设置为两个元素，最后一个是li包装。

子.menu-item-has-children元素为它和他的子.sub-menu获取正确的类，但在第二个元素（li包装器）进入后，它删除了第一个{ {1}}元素并将类再次设置为li包装元素。

那么该怎么做？首先，您可以将点击事件选择器设置为.menu-item-has-children，以便一次只点击一个元素，然后在.menu-item-has-children a变量中调用他的li父级来查找submenu个孩子。我更喜欢向您展示更短更简单的代码：

.sub-menu

点击后，我们通过查找$('body').on('click', '.menu-item-has-children a', function() { $(this).parent().find('> .sub-menu, .sub-menu.menu-open').toggleClass('menu-open'); });来搜索元素的子元素，第一个用于直接> .sub-menu, .sub-menu.menu-open子元素，第二个用于关闭已经打开的.sub-menu个孩子。我们使用.toggleClass()在两种情况之间切换，因此我们不需要检查类的检查并添加添加和删除类的额外操作： https://jsfiddle.net/08gckq8n/84/

子菜单下拉列表问题的WordPress子菜单

2 个答案: