javascript - div标签不使用jQuery折叠/展开

我有下面的html和包含类tabHeader的div根本不展开/折叠。

<div class="tabHeader">
     <li><a href="#" id='onejltab' class="tablinks">1JL(Mobile)</a></li>
      <div class="insideTabHeader">
          <li><a href="/onejl/1" class="tablinks" style="text-align:center">Network</a></li>
          <li><a href="/onejl/2" class="tablinks" style="text-align:center">Application</a></li>
          <li><a href="/onejl/3" class="tablinks" style="text-align:center">Integration</a></li>
          <li><a href="/onejl/4" class="tablinks" style="text-align:center">Infrastructure</a></li>
      </div>
</div>

写下以下jquery折叠/展开div tabHeader

$("#tabHeader").click(function () {

    $tabHeader = $(this);
    $insideTabHeader = $tabHeader.next();
    $insideTabHeader.slideToggle(500, function () {
    });

});

我不确定为什么上面的jquery无法正常工作。任何帮助/解决方案都会有很大帮助。

提前致谢。

最佳答案

1-使用锚点ID或类代替div

2-使用$tabHeader.closest('li').next();代替$tabHeader.next();

$("#onejltab").click(function () {

    $tabHeader = $(this);
    $insideTabHeader = $tabHeader.closest('li').next();
    $insideTabHeader.slideToggle(500, function () {
    });

});

演示版

$("#onejltab").click(function () {
    $tabHeader = $(this);
    $insideTabHeader = $tabHeader.closest('li').next();
    $insideTabHeader.slideToggle(500, function () {
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabHeader">
     <li><a href="#" id='onejltab' class="tablinks">1JL(Mobile)</a></li>
      <div class="insideTabHeader">
          <li><a href="/onejl/1" class="tablinks" style="text-align:center">Network</a></li>
          <li><a href="/onejl/2" class="tablinks" style="text-align:center">Application</a></li>
          <li><a href="/onejl/3" class="tablinks" style="text-align:center">Integration</a></li>
          <li><a href="/onejl/4" class="tablinks" style="text-align:center">Infrastructure</a></li>
      </div>
</div>