Javascript .click（）在嵌套在元素中的元素上单击。click（）

我正在尝试在手风琴内部制作手风琴。。。我有点挣扎

基本上，我有一个div

。applicator

，单击它会添加一个类

。expand

，它将高度设置为auto，但是在

。applicator

div的内部，我有另一个div

。applicator child

，它应该做同样的事情，并且做。。。但是，

.applicator

在您单击

时关闭。applicator child

，这意味着您必须再次单击

.applicator

以打开嵌套元素

这是我的密码：

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>

我可以简单地删除

$（this.removeClass（'expand'）.appliant

的code>，但我们将显示大量数据，因此这并不理想

我如何解决这个问题

---

提前感谢：）

您想防止冒泡。冒泡意味着，您要对其作出反应的事件将从DOM传递到父对象，直到它到达窗口为止

---

检查“event.stopPropagation（）”方法，它将阻止任何后续侦听器作出反应。

这只是事件冒泡的预期行为。 有关如何禁用

单击事件

以使DOM冒泡并触发父元素上的事件，请参见jQuery上的这一部分

基本上，你只需要这样做：

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

---

如果通过参数，则单击处理程序：

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

---

您可以使用event.target来检查您是在单击父项还是子项，并决定从那里采取什么操作。

make

application

div和

application-child

div。嵌套单击是不好的主意。您需要在引发的

单击
事件上调用
stopPropagation（）
。您还可以通过使用
toggleClass（）
Cheers，@RoryMcCrossan简化类的添加/删除。我不知道。非常感谢。完美的我没有意识到这一点，我对jQuery有些陌生。非常感谢你，阿加什！真的很感激：）谢谢你，瑞安。我选择了@agash提供的答案，但很高兴知道这可以通过多种方式实现。谢谢谢谢你，特里夫农！正是我想要的。
$('.applicant').click(function(event){
    console.log(event.target);
    if ($(this).hasClass('expand')) {
        $(this).removeClass('expand');
    } else {
        $( this ).addClass('expand');
    }
});