javascript - 扩展以前解决方案中的表行问题

Question

我正在使用已发现的此问题的公认解决方案 here .

Solution's JSFiddle

我的目标只是让表格的行在单击时展开。除了一个问题外，该解决方案对我来说非常有用。一旦展开的行可见，如果您在展开行的最底部附近单击，该行将消失并且无法重新展开。这与公认的解决方案略有不同。如果在一行展开后单击“名称”下的边框，解决方案行也会消失，无法重新展开。

这是 JS 函数:

$(function() {
    $("td[colspan=7]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});

如果需要，我会尝试提供更多信息。

我的 td 只有扩展行的填充设置为 0。如果我给它一些填充，单击填充，甚至在行扩展之前，将删除整个扩展行。

编辑 要重现我的问题，请在展开一行后单击先前解决方案 fiddle 表中“名称”的“N”正下方的边框。

EDIT 如果我单击边框的任何部分，就会发生在我的表格上。

Answer 1

你只需更改 jsfiddle 中的一行，它就会起作用:

将 $target.slideUp(); 更改为 $target.closest("td").children("p").slideUp(); ，然后你即使您单击边框，也将能够展开。