Question

我是javascript和jQuery的绝对初学者，试图学习。我有一些用这个jQuery切换的表：

$(document).ready(function() {
    $('th').click(function() {
        $(this).parents('table').find('td').slideToggle("fast");
    });
});

我想一次只显示一个表，这样如果你显示第一个表然后显示另一个表，则第一个表关闭。我非常感谢任何指导。完整代码：http://jsfiddle.net/qHGDF/1/

Answer 1

试试这个

  $('th').click(function() {
    $(".datagrid").children("table").find("td").slideUp();
    $(this).parents('table').find('td').slideToggle("fast");
  });

Answer 2

你需要隐藏那些打开的，一种方法是找到所有不需要显示的td并运行slideUp()：http://jsfiddle.net/qHGDF/4/

$('th').click(function() {
    var thetd =  $(this).parents('table').find('td');
    $('table  td').not(thetd).slideUp("fast");
    $(thetd).slideToggle("fast");
});

Answer 3

您可以随时向上滑动所有其他td的

$(document).ready(function() {
    $('th').click(function() {
        $("td").slideUp("fast");
        $(this).parents('table').find('td').slideToggle("fast");
    });
});

Answer 4

为了做到这一点，你需要先隐藏所有的tds

var $ = jQuery.noConflict(true);
        $('th').click(function() {
            $('table  td').hide(300);
            $(this).parents('table').find('td').slideToggle("fast");
        });

fiddle

Answer 5

如果您的表格上有太多条目，并且为了优化渲染，幻灯片 <tbody>元素而不是<td>

Answer 6

你可以试试这个：http://jsfiddle.net/5hDVS/

$(document).on('click','div.datagrid',function() {
     $('table td',this).slideToggle("fast");
     $('td',$(this).siblings('div.datagrid')).slideUp('fast');
});

jQuery切换 - 只显示一个div

6 个答案: