'this' parent 选择器不工作

Question

我有两个 jQuery 函数，分别显示或隐藏 div，嵌套在 div 中，嵌套在列表中。

第一个函数应用 CSS display: block，第二个函数应用 display: none。但是第二个功能不起作用。

查看 fiddle。

单击绿色的 li 元素加载第一个函数。
点击橙色div header加载第二个函数。（不工作）

用简单的英语来说，我不想实现的是两个功能。第一个打开 child，第二个关闭 parent。

注意：除了 parent 和 child 之外，不能使用其他选择器，因此没有特定的 ID。该代码旨在应用于大量相同的结构。

$(document).ready(function () {
    $('.listcontainer').click(function () {
        $(this).children().css('display', 'block');
    })
});
$(document).ready(function () {
    $(".popup_header").click(function () {
        $(this).parent('div').css("display", "none");
    })
});

Answer 1

问题是因为点击事件使 DOM 冒泡，所以点击内部 div 使其出现，但随后父点击事件触发，立即再次隐藏它。您需要在内部 div:

的点击事件上使用 stopPropagation()

$(".popup_header").click(function (e) {
    e.stopPropagation();
    $(this).parent('div').css("display", "none");
});

Example fiddle

另请注意，您可以将所有代码放入单个 DOMReady 处理程序中。

Answer 2

它正在工作，但第一个功能完美无缺，因为您的目标是正确的 div，在第二阶段，您点击并同时瞄准两个 div，所以您的代码实际上是隐藏它并再次显示它。它有两个功能。

函数 2 触发隐藏，函数 1 触发隐藏，因为它是父级并且 $('.listcontainer') 中的所有内容都是可点击的。

解决方案：

分离监听器区域，或者简单地删除监听器并重新添加。

'this' parent 选择器不工作

'this' parent selector not working

css

jquery

children

parent

解决方案：