Question

我试图切换一个兄弟班。

<tr id='user-1' class="alternate">
<td><button type="button" class='more_info'>Open</button></td>
</tr>

<tr id='user-1' style='display:none;' class='more_info_2'>
<td>Something</td>
</tr>

我想在点击.more_info时淡入.more_info_2类。

我已经尝试了一切......兄弟姐妹（），下一个（），孩子（）...

<script>
$( document ).ready(function() {
$(".more_info").click(function(){
$(this).siblings(".more_info").toggle();
});
});
</script>

然而，对我来说没有任何作用...... 也许我的html结构错了或者什么......请帮助。

非常感谢任何帮助。谢谢！

Answer 1

如果你想展示第二个<tr>，你需要更像这样的东西：

$(".more_info").click(function () {
    $(this).parents("tr").next().toggle();
});

你可以在这里看到小提琴：http://jsfiddle.net/mifi79/89SRg/

Answer 2

首先：修复ID。您不能在同一页面上拥有两个具有相同ID的元素。

第二：更改此内容：

$(this).siblings(".more_info").toggle();

对此：

$(this).closest("TR").next().toggle();

您的.more_info按钮没有兄弟姐妹。你真正想要的是它的父行的下一个兄弟。

Answer 3

如果您只是分配给某个课程，则甚至不需要使用.parents或.next。另外你说你想让它淡入，所以只需使用这段代码：

$(document).ready(function () {
    $(".more_info").click(function () {
        $(".more_info_2").fadeToggle();
    });
});

确保您的表格元素当然包装在<table>...</table>标记中。

DEMO

用jquery切换兄弟元素

3 个答案: