我有下面的 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-使用 anchor 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>
关于javascript - div 标签不使用 jquery 折叠/展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43536943/