Javascript 显示下一个非同级元素

我有下面的HTML代码。我希望类“moreDetails”仅在用户单击“查看更多”按钮时显示

    <tr class="currentRow">
    <td>John</td>
    <td>Doe</td>
    <td>johndoe@example.com</td>

    <td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td></tr>
    <tr class = moreDetails>
    <td>
             Additional details
    </td>
    </tr>         
    <tr>

将

find（'moretails'）

更改为

find（'.moretails'）

或

或

编辑：

如果

html

是

<tr class="currentRow">
    <td>John</td>
    <td>Doe</td>
    <td>johndoe@example.com</td>
    <td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td>
</tr>
<tr class = moreDetails>
    <td> Additional details</td>
</tr>

缺少类名周围的引号。它应该是

当页面加载时，根据您的要求，您需要隐藏

$（'button'）。最近的（'.currentRow'）。下一个（'.moreDetails'）。css（'color'，'red'）

约翰
雌鹿
johndoe@example.com
查看更多
其他细节
在类选择器中添加句点，
$（obj）.closest（'.currentRow'）.find（'.moreDetails'）.show（）$（obj）.closest（'.currentRow'）.find（'.moreDetails'）.show（）
无法使用此选项，因为
moreDetails
不是
currentRow
的孩子，而是兄弟姐妹
$(obj).closest('.currentRow').find('.moreDetails').show();

$(obj).parent().next().show();

$(obj).parent().next('.moreDetails').show();

<tr class="currentRow">
    <td>John</td>
    <td>Doe</td>
    <td>johndoe@example.com</td>
    <td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td>
</tr>
<tr class = moreDetails>
    <td> Additional details</td>
</tr>

$(this).closest('tr').next().show();