jquery - 仅在单击同一个类的元素上执行事件

Question

我想知道是否可以仅在单击的元素上执行事件，尽管这个元素具有相同的类，如果该元素内部或旁边有一个带有“子类别”类的 div，请使用toggleClass 方法显示它。这里是 html。

<ul>
    <li class="catname">something</li>
    <li class="catname">
       something
      <div class="subcategory none">some hidden content to show</div>
    </li>
    <li class="catname">something</li>
</ul>

这是我尝试过的:

$(document).on("click",".catname", function (event) { 
    $(".subcategory").next().toggleClass('none') 
});

还有这个:

$(".catname").bind("click", function() {
    $(".subcategory").next().toggleClass('none')
});

谢谢

Answer 1

您应该在点击处理程序中使用 this 关键字来引用引发事件的元素。从那里您可以遍历 DOM 来 find() 内部元素。试试这个:

$(document).on('click', '.catname', function (event) { 
    $(this).find('.subcategory').toggleClass('none');
});

Example fiddle