Jquery 显示/隐藏深度表

我有一点JQUERY：

<script>
function initNav() {
    $('.nav tr table td table').hide();
        $('.nav .navheading').click(
            function() {
                $('.nav tr table td table').slideToggle('500');
            }
        );
}
$(document).ready(function() {initNav();});
</script>

函数initNav（）{
$（'.nav tr table td table'）.hide（）；
$（'.nav.navheading'）。单击(
函数（）{
$（'nav tr table td table'）。滑动切换（'500'）；
}
);
}
$（document）.ready（函数（）{initNav（）；}）；

我有一个导航表，看起来像下面的HTML代码：

类必须保留并且不能在源代码中更改，是否可以通过Jquery动态更改

<div class="nav">

<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td>
    <table class="navheading" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:100%;"><a class="navheading" href="#">Pictures</a></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" class="navsub">
      <tr>
        <td>
          <table class="navlink" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td style="width:100%;">
               <a class="navitem" href="#" style="border-style:none;font-size:1em;">Pic Link</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table class="navheading" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:100%;"><a class="navheading" href="#">Pictures</a></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" class="navsub">
      <tr>
        <td>
          <table class="navlink" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td style="width:100%;">
               <a class="navitem" href="#" style="border-style:none;font-size:1em;">Pic link</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>

</div>

加载时它确实隐藏了正确的表，但滑动切换会在我希望单击打开和单击关闭的位置展开和折叠表

可能遗漏了一些非常基本的东西

我在你的代码中没有看到任何导航类

可以使用函数children（“选择器”）选择子元素

---

我更改了脚本和html类：

沙文

<script type="text/javascript">
$(function() {
    $('.nav .navsub').hide();
    $('.nav .navheading').click(function() {
        $('.nav .navsub').hide();
        $(this).parent().parent().next().find(".navsub").slideToggle('500');
    });
});
</script>

---

现在就在那里。代码可以工作，但一个接一个地显示/隐藏。我无法更改HTML，我可以通过jquery进行更改？您可以检查父级的代码，看看是否可以找到更短的代码，但这就是我的工作方式

<div class="nav">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td>
    <table class="navheading" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:100%;"><a class="navheading_link" href="#">a Pictures</a></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" class="navsub">
      <tr>
        <td>
          <table class="navlink" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td style="width:100%;"><a class="navitem" href="#" style="border-style:none;font-size:1em;">a Pic Link</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table class="navheading" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="width:100%;"><a class="navheading_link" href="#">b Pictures</a></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" class="navsub">
      <tr>
        <td>
          <table class="navlink" cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td style="width:100%;">
               <a class="navitem" href="#" style="border-style:none;font-size:1em;">b Pic link</a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>

</div>

$(function() {
    $(".nav .navsub").hide();
    $(".nav a[class='navheading']").click(function() {
        $(".nav .navsub").hide();
        $(this).parent().parent().parent().parent().parent().parent().next().find(".navsub").slideToggle("500");
    });
});