javascript - 单击子项时 Jquery 父类事件触发

Question

嗨，我有子 ul 和父 li，它们是 jquery 的目标，它会在其中的单击事件上切换“显示”类。我面临的问题是，由于某种原因，当我单击子 ul li 元素时，它也会触发该事件。如何防止这种情况发生？

这是我的代码。

<script>
    $(document).ready(function() {
        $('.dropdown').click(function(e) {
            e.stopPropagation();
            $(this).toggleClass('shown');
            e.preventDefault();
        })
    })
</script>


<li class="dropdown"><a title="Installation" href="#">Installation <span class="caret"></span></a>
    <ul role="menu" class="dropdown-menu">
        <li>
            <a title="Wood Floor Installation" href="">Wood Floor Installation</a></li>
        <li>
            <a title="Sub Floor Preparation" href="">Sub Floor Preparation</a></li>
        <li>
            <a title="Type of your subfloor" href="">Type of your subfloor</a></li>
        <li>
            <a title="Wood Floor Fitting Method" href="">Wood Floor Fitting Method</a>
        </li>
    </ul>
</li>

Answer 1

您指定希望下拉列表中的所有内容都触发事件。如果你只想要顶级A，它看起来更像是这样的:

jQuery(document).ready(function($) {
   $('.dropdown>a').click(function(e) {
     $(this).parent().toggleClass('shown');
     e.preventDefault();
   })
})