我正在尝试制作产品类别的崩溃侧栏。通过使用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);
您必须使用$(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>
它最终使用了下面的函数--这样我就可以给每个‘儿童’类一个唯一的id来解决我的问题。
(function($){
$('ul.children').each(function(a,b,c,d,e,f,g){
$(this).attr('id',$(this).attr('class')+a)
})
console.log($('body').html());
