jquery - “this”父选择器不起作用

Question

http://jsfiddle.net/raduv118/

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

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

看看 fiddle 。

1. 单击绿色 li 元素加载第一个函数。
2. 单击橙色 div 标题以加载第二个函数。 (不工作)

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

注意:除了父级和子级之外，不得使用其他选择器，因此没有特定的 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

问题是因为 click 事件在 DOM 中冒泡，因此单击内部 div 会使其出现，但随后触发父级 click 事件，立即再次隐藏它。您需要在内部 div 的点击事件上使用 stopPropagation():

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

Example fiddle

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