'这个'父选择器不起作用

Question

http://jsfiddle.net/raduv118/

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

第一个函数应用CSS display: block,第二个函数适用display: none.但第二个功能不起作用.

看看小提琴.

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会使其显示,但随后会触发父点击事件,并立即再次隐藏它.你需要使用stopPropagation()内部的click事件div:

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

示例小提琴

另请注意,您可以将所有代码放在单个DOMReady处理程序中.