wordpress 如果有子菜单，则将HTML元素添加到锚标记

mctunoxg 于 2022-11-22 发布在 WordPress

关注(0)|答案(3)|浏览(102)

我试过这个

if ($('nav li.menu-item-has-children:has(ul)'))
$ ('nav li.menu-item-has-children a').append ( "<span class=\"plus-minus\">+</span>");

但是所有锚标记子菜单也都获得相同的HTML元素Added
这是菜单结构

<ul id="primary-menu" class="menu">
  <li class="menu-item "><a href="home/">Home</a></li>
  <li class="menu-item" ><a href="about">About <span class=\"plus-minus\">+</span></a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="basics/">Basic</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children"><a href="products" aria-current="page">Products</a>
    <ul class="sub-menu">
      <li  class="menu-item"><a href="Product-1">Product-1</a></li>
      <li  class="menu-item "><a href="Product-2">Product-2</a></li>
      <li  class="menu-item "><a href="Product-3">Product-3</a></li>
      <li  class="menu-item "><a href="Product-4">Product-4</a></li>
      <li  class="menu-item "><a href="Product-5">Product-5</a></li>
      <li  class="menu-item "><a href="Product-6">Product-6</a></li>
    </ul>
  </li>
  <li  class="menu-item"><a href="contact-us/">Contact Us</a></li>
</ul>

我希望它是

<ul id="primary-menu" class="menu">
  <li class="menu-item "><a href="home/">Home</a></li>
  <li class="menu-item" ><a href="about">About <span class=\"plus-minus\">+</span> </a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="basics/">Basic</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children"><a href="products" aria-current="page">Products <span class=\"plus-minus\">+</span></a>
    <ul class="sub-menu">
      <li  class="menu-item"><a href="Product-1">Product-1</a></li>
      <li  class="menu-item "><a href="Product-2">Product-2</a></li>
      <li  class="menu-item "><a href="Product-3">Product-3</a></li>
      <li  class="menu-item "><a href="Product-4">Product-4</a></li>
      <li  class="menu-item "><a href="Product-5">Product-5</a></li>
      <li  class="menu-item "><a href="Product-6">Product-6</a></li>
    </ul>
  </li>
  <li  class="menu-item"><a href="contact-us/">Contact Us</a></li>
</ul>

if ($('nav li.menu-item-has-children:has(ul)'))
$ ('nav li.menu-item-has-children a').append ( "<span class=\"plus-minus\">+</span>");

wordpress

来源：https://stackoverflow.com/questions/74398466/add-a-html-element-to-the-anchor-tag-if-has-child-or-sub-menu

3条答案

按热度按时间

30byixjq1#

试试这个：

(function ($) {
  $(document).ready(function () {
    if ($("nav li.menu-item:has(ul)").length) {
      $("nav li.menu-item-has-children > a").append(
        '<span class="plus-minus">+</span>'
      );
    }
  });
})(jQuery);

赞(0）回复(0）举报 2022-11-22

vfwfrxfs2#

这两行的语义都不正确：

if ($('nav li.menu-item-has-children:has(ul)'))

$()函数的返回值将始终是一个jQuery对象，因此条件将始终计算为true。

if ($('nav li.menu-item-has-children:has(ul)').length)

但等一下因为没必要。

$ ('nav li.menu-item-has-children a').append ( "<span class=\"plus-minus\">+</span>");

将<span>元素附加到与选择器匹配的所有元素。另一行中的:has()对该选择器没有影响。
我猜你真正想要的是

$ ('nav li.menu-item-has-children:has(ul) a').append ( "<span class=\"plus-minus\">+</span>");

如果没有if，它将选择nav li.menu-item-has-children:has(ul)的所有后代元素，并将<span>元素附加到这些后代元素。

赞(0）回复(0）举报 2022-11-22

flvlnr443#

因为您要将span元素附加到li.menu-item-has-children类下的每个锚标记。
您可以使用>选择器。
请尝试替换此行。

$ ('nav li.menu-item-has-children > a').append ( "<span class=\"plus-minus\">+</span>");

赞(0）回复(0）举报 2022-11-22

我来回答

wordpress 如果有子菜单，则将HTML元素添加到锚标记

3条答案

相关问题

热门标签

最新问答