JavaScript点击事件 - 查找所有发生

Question

我有一个JavaScript，该JavaScript发生在表上的单击事件上。该代码可以根据应有的工作，并且只能将其找到的第一个" P"打开。我希望代码将" p"的所有出现到下一个'name'和'info'。

javaScript：

$(document).ready(function()
{
    $("td[colspan=1]").find("p").hide();
    $("table").click(function(event)
    {
        event.stopPropagation();
        var $target = $(event.target);
        alert(event.target);
        // var current_event = $(event.currenttarget);
        if ( $target.closest("td").attr("colspan") > 1 )
        {
            $target.slideUp();
        }
        else
        {
            // alert(event.currentTarget);
            // var currentEventTarget = event.currentTarget; // this outputs: Object object
            // document.write(event.currentTarget.nodeName); // this outputs: TABLE 
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});

，桌子看起来像这样(我从其他地方借了它(：

<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="1"><p>Blah 1</p></td></tr>
    <tr><td colspan="1"><p>Blah 2</p></td></tr>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="1"><p>Blah 3</p></td></tr>
</table>

因此，在单击第一行时，当前仅切换" blah1"，然后单击第2行切换" blah 3"。我想单击第一行以切换，'blah 1'和'blah 2'。

我希望这是有道理的，任何帮助将不胜感激。RGD

编辑：作为旁注，我需要能够以后单击" blahs"，因为它们会将我带到单独的网页。我还没有弄清楚该怎么做。但对于这个特定问题不是必需的。

edit2：在搜索更多之后，我找到了nextAll()，也许可以有所帮助？但是我不知道如何使用它。我尝试了以下操作，但没有用：

$target.closest("tr").nextAll("p").slideToggle();

edit3：我偶然解决了它。我在每行的<tr>中引入了一个="停止"。并使用以下代码：

$target.closest("tr").nextUntil("tr.stop").find("p").slideToggle();

现在，这会找到每个" P"，直到下一个行创建为止。因此，每个点击都会显示关联的所有行。

Answer 1

实现此目的的一种可能方法是给＆lt;p>标签并切换它们，如下所示：

$(document).ready(function()
{
    $("td[colspan=1]").find("p").hide();
    $("table").click(function(event)
    {
        event.stopPropagation();
        var $target = $(event.target);
       // alert(event.target);
        // var current_event = $(event.currenttarget);
        if ( $target.closest("td").attr("colspan") > 1 )
        {
            $target.slideUp();
        }
        else if($target.closest("td").attr("colspan") == 1)
        {
            // alert(event.currentTarget);
            // var currentEventTarget = event.currentTarget; // this outputs: Object object
            // document.write(event.currentTarget.nodeName); // this outputs: TABLE 
           //$target.closest("tr").next().find("p").slideToggle();
		     $( ".toggle1" ).slideToggle( "slow" );
        }                    
    });
	$( ".toggle2" ).click(function() {
  $( ".toggle2This" ).toggle( "slow", function() {
    // Animation complete.
  });
});
	
	
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="1"><p class="toggle1">Blah 1</p></td></tr>
    <tr><td colspan="1"><p class="toggle1">Blah 2</p></td></tr>
    <tr><td class="toggle2"><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="1"><p class="toggle2This">Blah 3</p></td></tr>
</table>

希望回答您的问题。