Question

我正在尝试在手风琴内部创建一个手风琴...，我为此付出了一些努力。

基本上，我有一个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，但是我们将显示很多数据，所以这不是理想的选择。

我该如何解决？

预先感谢：）

Answer 1

那只是冒泡预期行为的事件。有关如何禁用click-Event以使DOM冒泡并触发父元素上的事件的信息，请参见jQuery上的link。

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

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

Answer 2

您要防止冒泡。冒泡意味着您正在响应的事件正在DOM上传递到父对象，直到到达窗口。

检出“ event.stopPropagation（）”方法，该方法将防止任何后续的侦听器做出反应。

Answer 3

在点击处理程序上，如果您通过了参数，则：

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

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

使用.click（）嵌套在元素内部的元素上的.click（）

3 个答案: