javascript - jQuery 切换 - 只显示一个 div

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 ：http slideUp(): //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

为此，您需要先隐藏所有 td

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

小提琴

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');
});