Question

为什么这两个函数有奇怪的行为，当我点击thead时，tbody会展开然后折叠。

在第二个函数上可以做一些测试，向if，else语句添加警报，但它只进入if语句，所以它只会滑动。

我注意到的另一件事是，当tbody中只有一行时它可以正常工作。为什么呢？

我还尝试添加return false，没有任何内容，它没有被调用两次或在任何其他地方调用。

如果能得到一些解决方案，我将不胜感激。

感谢。

Function 1
$(function() {
    $("table.section thead").click(function() {
    $(this).next("table.section tbody").slideToggle("slow");

    });
});

Function 2
$(function() {
    $("table.section thead").click(function() {
      var body = $(this).next("table.section tbody");
      if (body.is(":visible"))
         body.slideUp("slow");
      else
         body.slideDown("slow");
    });
});

UPDATE 表

<table>
<thead>
<tr><td>heading></td></tr>
</thead>
<tbody>
<tr><td>content1</td></tr>
<tr><td>content2</td></tr>
</tbody>
</table>

Answer 1

目前还不清楚，但如果您在脚本中同时使用这些内容，那么您将调用.click（）两次，相当于：

$(function() { 
    $("table.section thead").click(function() { 
      $(this).next("table.section tbody").slideToggle("slow"); 
      var body = $(this).next("table.section tbody"); 
      if (body.is(":visible")) 
         body.slideUp("slow"); 
      else 
         body.slideDown("slow"); 
    }); 
});

Answer 2

我查看了jQuery邮件列表，这是高度依赖于浏览器的，因为它们处理表以及它们如何以完全不同的方式阻止。相反，我会尝试将头部放在不同的元素中并滑动整个桌子，或者相反，使身体褪色，这样的事情：

$(function() {
  $("table.section thead").click(function() {
    $(this).next("tbody").animate({opacity: 'toggle'});
  });
});

动态调整单个表组件的维度并使其正确地跨浏览器似乎不值得在jQuery框架中修复，所以我不希望这很快就会改变。

jQuery函数的奇怪行为

2 个答案: