使用 jquery 或 javascript 为父和子属性创建手风琴下拉菜单

如何解决使用 jquery 或 javascript 为父和子属性创建手风琴下拉菜单

我在stackoverflow的帮助下设法拼凑了以下jquery：

jQuery( document ).ready(function() {
    jQuery(".product-categories .cat-item-17").attr("data-toggle","collapse").attr("role","button").attr("aria-expanded","false").attr("aria-controls","collapseMenu").attr("href","#childcats1").attr("id","parent-sidebar");
    jQuery(".product-categories .cat-item-17 .children").attr("id","childcats1").addClass("collapse");

});

jQuery( document ).ready(function() {
    jQuery(".product-categories .cat-item-22").attr("data-toggle","#childcats2").attr("id","parent-sidebar");
    jQuery(".product-categories .cat-item-22 .children").attr("id","childcats2").addClass("collapse");

});

上面的脚本为我在 wordpress 中的每个父类别添加了各种属性（第一个 li 的 te 类为 'cat-parent'），并将 href 的 ID 添加到子类别（嵌套的 ul 的类为'孩子们'）。这是为了创建一个引导手风琴风格的导航下拉菜单。见下面输出的html：

<ul class="product-categories">

<li class="cat-item-17 cat-parent current-cat-parent collapsed" data-toggle="collapse" role="button" 
aria-expanded="false" aria-controls="collapseMenu" href="#childcats1" id="parent-sidebar">
<a href="https://www.example.com/clothing/">Clothing</a>
  <ul class="children collapse" id="childcats1" style="">
  <li class="cat-item cat-item-20"><a 
  href="https://www.example.com/clothing/accessories/">Accessories</a></li>
  <li class="cat-item cat-item-19"><a href="https://www.example.com/clothing/hoodies/">Hoodies</a> 
  </li>
  <li class="cat-item cat-item-18 current-cat"><a 
  href="https://www.example.com/clothing/tshirts/">Tshirts</a></li>
  </ul>
</li>

<li class="cat-item cat-item-22 cat-parent collapsed" data-toggle="collapse" role="button" aria- 
expanded="false" aria-controls="collapseMenu" href="#childcats2" id="parent-sidebar">
<a href="https://www.example.com/decor/">Decor</a>
  <ul class="children collapse" id="childcats2" style="">
  <li class="cat-item cat-item-31"><a href="https://www.example.com/decor/pennants/">Pennants</a> 
  </li>
  </ul>
</li>

</ul>

问题是当我在 wordpress 中创建一个带有子项的新父菜单项时，我必须编辑我的 jquery 脚本以添加新的 cat-parent 和 children ID。

有没有办法防止必须使用某种 foreach 脚本执行此操作，即：

foreach cat-parent 添加属性+唯一href ID，为子ul添加唯一ID？

感谢您的帮助。

解决方法

您可以使用 .each 循环遍历 li，然后使用 $(this) 添加属性到您的 lis 。此外，将 id 添加到您的 children您可以使用 $(this).find(".children") 这将引用子级 ul 然后在那里添加属性。

演示代码：

//loop through li
$(".product-categories > li").each(function(i) {
  //use this to refer current li
  $(this).attr("data-toggle","collapse").attr("role","button").attr("aria-expanded","false").attr("aria-controls","collapseMenu").attr("href",`#childcats${i}`).attr("id",`parent-sidebar${i}`);
  //use .find to get children ul and add if there
  $(this).find(".children").attr("id",`childcats${i}`).addClass("collapse");
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="product-categories">
  <li class="cat-item-17 cat-parent current-cat-parent collapsed">
    <a href="https://www.example.com/clothing/">Clothing</a>
    <ul class="children" style="">
      <li class="cat-item cat-item-20"><a href="https://www.example.com/clothing/accessories/">Accessories</a></li>
      <li class="cat-item cat-item-19"><a href="https://www.example.com/clothing/hoodies/">Hoodies</a>
      </li>
      <li class="cat-item cat-item-18 current-cat"><a href="https://www.example.com/clothing/tshirts/">Tshirts</a></li>
    </ul>
  </li>
  <li class="cat-item cat-item-22 cat-parent collapsed">
    <a href="https://www.example.com/decor/">Decor</a>
    <ul class="children" style="">
      <li class="cat-item cat-item-31"><a href="https://www.example.com/decor/pennants/">Pennants</a>
      </li>
    </ul>
  </li>

</ul>