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

我正在尝试在手风琴内部创建一个手风琴...，我正在努力挣扎。

本质上，我有一个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');
        }
    });

我可以简单地从$(this).removeClass('expand');中删除​​.appliant，但是我们将显示很多数据，所以这不是理想的选择。

我该如何解决？

提前致谢 ：）

最佳答案

那只是冒泡预期行为的事件。
请参阅jQuery上的link，以了解如何禁用click-Event来使DOM冒泡并触发父元素上的事件。

基本上，您只需要执行以下操作：

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