Question

我有一点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>

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

CLASSES必须保留并且不能在源代码中更改，可以通过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>

它会在加载时隐藏正确的表格，但slideToggle会展开并折叠表格，我只需要点击一下即可打开，然后单击一下即可关闭。

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

Answer 1

我更改了脚本和html类：

JAVASCRIPT

<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

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

Answer 2

我的代码中没有看到任何导航类。
您可以使用函数children（“selector”）来选择子元素

显示/隐藏深层表格

2 个答案: