javascript - .click() 在嵌套在 .click() 元素内部的元素上

Question

我正在尝试在 Accordion 内部创建一个 Accordion ......并且我有点挣扎。

本质上，我有一个 div .applicant，单击它会添加一个 .expand 类，它将高度设置为 auto，但是，在 内部.applicant div，我有另一个 div .applicant-child，它应该做同样的事情，并且确实......但是，.applicant 在您关闭时关闭单击.applicant-child，这意味着您必须再次单击.applicant才能打开查看嵌套元素。

这是我的代码:

HTML

    <div class="row">
        <div class="col-sm-12">
            <div class="applicant">
                <p><b>PS4 Tournaments</b></p>
                <div class="applicant-child">
                    <p>lalal</p>
                    <p>lalal</p>
                </div>
            </div>
        </div>
    </div>

jQuery

    $('.applicant').click(function(){
        if ($(this).hasClass('expand')) {
            $(this).removeClass('expand');
        } else {
            $( this ).addClass('expand');
        }
    });

    $('.applicant-child').click(function(){
        if ($(this).hasClass('expand')) {
            $(this).removeClass('expand');
        } else {
            $( this ).addClass('expand');
        }
    });

我可以简单地从 .appliant 中删除 $(this).removeClass('expand');，但我们将显示大量数据，因此并不理想。

如何解决这个问题？

提前致谢:)

Answer 1

这只是事件冒泡的预期行为。看这个link关于 jQuery 如何禁用 click-Event 来冒泡 DOM 并触发父元素上的事件。

基本上，您只需这样做:

$('.applicant-child').click(function(event){
    event.stopPropagation();
    if ($(this).hasClass('expand')) {
        $(this).removeClass('expand');
    } else {
        $( this ).addClass('expand');
    }
});