使用jquey向类似的类组添加唯一的类

Question

我正在尝试制作产品类别的崩溃侧栏。通过使用woocommerce product categories小部件和一些代码。（不需要对显示所有类别和子类别的边栏进行编码）。我实现了一个折叠边栏，但当我点击一个主类别时，所有的类别同时打开，所有的子类别都出现了。我没有找到只使用jquery为每个子类别组提供唯一的类的方法-所有woocommerce默认的调用都称为“children”。

(function($){ 
$(document).ready(function() {

$("li.cat-item-22").click(function(){
$('ul.children').slideToggle();
});

$("li.cat-item-29").click(function(){
$('ul.children').slideToggle();
});

$("li.cat-item-30").click(function(){
$('ul.children').slideToggle();
});

$("li.cat-item-40").click(function(){
$('ul.children').slideToggle();
});

$("li.cat-item-43").click(function(){
$('ul.children').slideToggle();
});

$("li.cat-item-55").click(function(){
$('ul.children').slideToggle();
});

$("li.cat-item-61").click(function(){
$('ul.children').slideToggle();
});

});

})(jQuery);

Answer 1

它最终使用了下面的函数--这样我就可以给每个‘儿童’类一个唯一的id来解决我的问题。

(function($){

$('ul.children').each(function(a,b,c,d,e,f,g){
$(this).attr('id',$(this).attr('class')+a)
})
console.log($('body').html());

Answer 2

您必须使用$(this)使用click事件引用当前对象

null

$(document).ready(function() {

$("li.cat-item-22").click(function(){
  $(this).find('ul.children').slideToggle();
});

});

.children { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="cat-item-22">
    Test in li.cat-item-22
    <ul class="children">
      <li>Test in ul.children</li>
    </ul>
  </li>
</ul>