e.stopPropagation() 和 .slideToggle() 在点击事件中发生冲突

Question

我在其父级（通知框）内有一个子级 close 按钮。单击父项时，通知框将展开，其中通知的说明和子按钮将变得可见。

单击该按钮后，应取消展开通知并隐藏其本身和说明。

因为该按钮在其父级单击事件内有一个单击事件，所以两者都被调用。我转向 event.stopPropagation() 让父通知在单击后停止重新展开。虽然这阻止了通知在单击关闭按钮时展开，但它提出了一个我不明白的新问题。

在我的测试中，我设置了两个通知，均未展开。当我单击通知时，它会展开并显示说明和关闭按钮。当我单击关闭按钮时，通知展开，按钮和说明被隐藏。 但是，我发现另一个通知出现了描述和关闭按钮！

代码：

    var $NotificationContainer = $("#NotificationContainer");
    $NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');

    var $thisNotification = $NotificationContainer.children('.Notification[title='+title+']');
    $thisNotification.append('<div class="NotificationTitle">'+title+'</div>');
    $thisNotification.append('<div class="NotificationDescription">'+description+'</div>');
    $(".NotificationDescription").hide();

    // Button used to close an expanded notification
    $thisNotification.append("<div class='NotificationCloseButton'></div>");
    $('.NotificationCloseButton').hide();

    // When the parent notification box is clicked
    $thisNotification.click(function(event)
    {
        $thisNotification.animate({height:250}, 1000);
        $thisNotification.find('.NotificationDescription').slideToggle('fast');
        $thisNotification.find('.NotificationCloseButton').slideToggle('fast');
    });

    // When the child close button is clicked
    $(".NotificationCloseButton").click(function(event)
    {
        event.stopPropagation();
        $thisNotification.animate({height:50}, 1000);
        $thisNotification.find('.NotificationDescription').slideToggle('fast');
        $thisNotification.find('.NotificationCloseButton').slideToggle('fast');
    });

我不知道 $thisNotification.find('element') 为何不出现捕捉正确的通知。

Answer 1

如果您将事件处理更改为

// When the parent notification box is clicked
    $thisNotification.click(function(event)
    {
        var self = $(this);
        self.animate({height:250}, 1000);
        self.find('.NotificationDescription').slideToggle('fast');
        self.find('.NotificationCloseButton').slideToggle('fast');
    });

    // When the child close button is clicked
    $(".NotificationCloseButton").click(function(event)
    {
        var self = $(this);
        event.stopPropagation();
        self.animate({height:50}, 1000);
        self.find('.NotificationDescription').slideToggle('fast');
        self.find('.NotificationCloseButton').slideToggle('fast');
    });

使用 this 来标识 clicked 元素，而不是依赖于创建元素时定义的变量（避免循环中所有元素都引用分配给变量的最后一个值的情况。）

---

此外，由于您要附加到#NotificationContainer，因此您只需选择最后一项而不是搜索对于相同的标题..

var $thisNotification = $NotificationContainer.children().last(); 

完全删除了选择器，因为您刚刚附加了最后一个元素..