gpt4 book ai didi

jQuery 切换导航

转载 作者:行者123 更新时间:2023-12-01 04:21:16 24 4
gpt4 key购买 nike

我正在尝试制作一个 Toogle 导航,当我单击以显示更多内容时,导航将从 5 扩展到最大数量。

代码如下:

jQuery(document).ready(function(){

jQuery("#nav-sidebox > li > a:first-child").removeAttr("href");
jQuery("#nav-sidebox > li > a:first-child").css("cursor", "pointer");
jQuery("#nav-sidebox > li > ul > li:nth-child(5)").nextUntil("ul").slideToggle();

jQuery("#nav-sidebox > li > a:first-child").click(function(){
jQuery("#nav-sidebox > li > ul > li:nth-child(5)").nextUntil("ul").slideToggle();
});
});

第 5 行使 li 第 5 项之后的所有 itens 进行切换,但是当我单击第一个子项时,我该怎么办,只有这个 ul 切换。

这是 HMTL:

<ul id="nav-sidebox">
<li>
<a>Click to toggle</a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a>Click to toggle</a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>

最佳答案

试试这个...

html(我刚刚向项目添加了文本,以便我可以看到发生了什么)...

<ul id="nav-sidebox">
<li>
<a>Click to toggle</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</li>
<li>
<a>Click to toggle</a>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</li>
</ul>​

jQuery...

$(document).ready(function(){
$("a").css("cursor", "pointer");
$("li:nth-child(5)").nextUntil("ul").slideToggle();

$("a").click(function(){
$(this).parent().find("li:nth-child(5)").nextUntil("ul").slideToggle();
});
});​

你可以在这个jsFiddle中看到结果... http://jsfiddle.net/Xm8Vt/

关于jQuery 切换导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10285187/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com