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

Question

我想知道是否可以仅在点击的元素上执行事件， 虽然这个元素有相同的类， 如果在此元素的内部或旁边有一个带有类＆＃39;子类别＆＃39;的div，则使用toggleClass方法显示它。 这里是html。

inc

这就是我的尝试：

<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') 
});

谢谢

Answer 1

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

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

Example fiddle