JQuarry 获取对象，然后将tr展开或者关闭

[Eniak]

看了一个代码，代码的意思是，有一个 TR Tag。

当点击 TR 是，如果TR里面的孩子是展开的，那么将他关闭，如果是关闭的将他展开。

代码如下

	$("._tr-withchild").on("click", function() {
		var $innerRow = $(this).next(); 
		if($innerRow.is(":visible")) {
			$innerRow.children().children().slideUp();
			setTimeout(function() {$innerRow.hide()}, 400);
		} else {
			$innerRow.show().children().children().slideDown();
		}
	});

我想把这个代码改一下，目的是，只保证最多一个TR 处于打开状态。
思路是， 获取当前所有的 标示为 “_tr-withchild” 的 TR， 对其进行遍历。 如果是点击的 TR， 那么按原程序处理，如果不是，则将它们关闭。

我试了几次，但是对与 JQuarry 的语法不是很熟悉。获取不到对象，帮忙看看应该怎么写呢。

我的程序段

$("._tr-withchild").on("click", function() {

		var all_tr_list = $("._tr-withchild");	
		var total = all_tr_list.length;
		
                for(var i=0; i< total; i++){
			var $tr = all_tr_list[ i ];
			if( $tr.id == $(this).id ){
				continue;
			}
			else{
				var $innerRow = $tr.next();                                              //  仿写原程序，不对
				$innerRow.children().children().slideUp();                 //   仿写原程序，不对
				setTimeout(function() {$innerRow.hide()}, 400);       //   仿写原程序，不对
			}
		}
		*/
		
		var $innerRow = $(this).next(); 
		if($innerRow.is(":visible")) {
			$innerRow.children().children().slideUp();
			setTimeout(function() {$innerRow.hide()}, 400);
		} else {
			$innerRow.show().children().children().slideDown();
		}
											
	});

[人生难得一只鸡]

页面结构是怎样的

[lzj0327]

var $innerRow =$( $tr).next();

[xuzuning]

示例

<script>
$(function() {
  $(".t1").on("click", function() {
    $('.t1').each(function() {
      $(this).next().hide();
    });
    $(this).next().show();
  });
  $('.t1').each(function() {
    $(this).next().hide();
  }).eq(0).next().show();
});
</script>
<table border=1>
<tr class=t1><td>a</td></tr>
<tr><td>A</td></tr>
<tr class=t1><td>b</td></tr>
<tr><td>B</td></tr>
<tr class=t1><td>c</td></tr>
<tr><td>C</td></tr>
</table>

[Eniak]

引用 2 楼 lzj0327 的回复:

var $innerRow =$( $tr).next();

这段代码，我加上了，逻辑上还是有点不对，能帮忙看一下吧，感觉好像是 $innerRow.is(":visible") 出了问题。也就是，在程序运行的时候，明明是打开的，这里却显示false，明明是关闭的，却显示true。 我把代码都贴上来了，页面的，还有js的，我应该怎么修改呢？

	$("._tr-withchild").on("click", function() {

		var all_tr_list = $("._tr-withchild");
		var total = all_tr_list.length;
		
		for(var i=0; i< total; i++)
		{
			var $tr = all_tr_list[ i ];
			if( $tr.id == this.id )
			{
				//var $innerRow = $(this).next();
				var $innerRow =$($tr).next();
				if($innerRow.is(":visible")) {
					$innerRow.children().children().slideUp();
					setTimeout(function() {$innerRow.hide()}, 400);
				} else {
					$innerRow.show().children().children().slideDown();
				}
			}
			else
			{
				var $innerRow =$($tr).next();
				if($innerRow.is(":visible")) {
					$innerRow.children().children().slideUp();
					setTimeout(function() {$innerRow.hide()}, 400);
				}
			}
		}
											
	});

页面代码

<tbody>
	<tr class="_tr-withchild" id="${rrt.key.toString()}" data-type="RiseRunTable">
		<td>
			标题一
		</td>
	</tr>	<!-- end of <tr class="_tr-withchild"> -->
	<tr class="_tr-sub" style="display:none">
		<td colspan="10">
			标题一的子内容
		</td>
	</tr>
	<tr class="_tr-withchild" id="${rrt.key.toString()}" data-type="RiseRunTable">
		<td>
			标题二
		</td>
	</tr>	<!-- end of <tr class="_tr-withchild"> -->
	<tr class="_tr-sub" style="display:none">
		<td colspan="10">
			标题二的子内容
		</td>
	</tr>
	<tr class="_tr-withchild" id="${rrt.key.toString()}" data-type="RiseRunTable">
		<td>
			标题三
		</td>
		</tr>	<!-- end of <tr class="_tr-withchild"> -->
		<tr class="_tr-sub" style="display:none">
			<td colspan="10">
				标题三的子内容
			</td>
		</tr>
	</tbody>

[Eniak]

顶一下，顶一下

[vincentguo_]

        <script type="text/javascript">
        $("._tr-withchild").click(function() {
        var all_tr_list = $("._tr-withchild");
        var total = all_tr_list.length;
        
        var $innerRow = $(this).next();

        if($innerRow.is(":visible")) {
        $innerRow.children().slideUp();
        setTimeout(function() {$innerRow.hide()}, 400);
        } else {
        $innerRow.show().children().slideDown();
        }
        }
        );

        </script>