解决方案：

Question

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

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

查看小提琴。

单击绿色li元素以加载第一个函数。
单击橙色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()的点击事件中使用div：

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

Example fiddle

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

Answer 2

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

函数2触发隐藏，函数1触发，因为是父，$（'。listcontainer'）内的所有内容都是可点击的。

解决方案：

分隔侦听器区域，或者简单地删除侦听器并再次添加。

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

2 个答案:

解决方案：