Question

我在元素上使用以下点击功能：

$('#extras').toggle(function() {
                    $('div#extras').show(); 
                    $('div#extras').stop().fadeTo('fast', 1);
                }, 
                function() {
                    $('div#extras').stop().fadeTo('fast', 0, function() { 
                                                             $(this).hide(); 
                                                             } );
                }
);

extras是一个div，里面有很多孩子。有些是按钮。现在，每当我单击其中一个按钮时，它会使父级div与子级消失。

我该如何制作点击功能只有在单击父级而不是所有子级时才会触发？

谢谢：）

Answer 1

如果隐藏父级，则默认情况下会隐藏子级（后代）。

仅为完整性：当前元素的父级选择器为$(this).parent();

Answer 2

单击元素时，将为所有父元素触发click事件。这可以通过从子节点的事件处理程序返回false来停止。因此，您需要为所有不应触发div的click事件并从中返回false的子项具有事件处理程序。像这样：

$("#id-of-button-inside-your-div").click(function() {
    //Do whatever you need to do
    return false;
});

Answer 3

尝试使用children()方法。

$('div#extras').children().show();

Answer 4

如果div消失，其所有内容都会消失。如果你必须让父母在没有孩子的情况下消失，你应该将孩子放在DOM外面，如果需要，可以用CSS直观地将它们放在里面。

Answer 5

试试这个：

$('div#extras').find('*').click(function(event){ event.stopPropagation(); });

这将使div中的所有元素忽略div中的click事件。

如何告诉jquery选择父元素，而不是它的子元素？

5 个答案: