jQuery切换导航
问题描述:
我triyng做一个谷歌浏览器,当我点击显示更多时,导航将从5扩展到最大数量的itens。jQuery切换导航
下面的代码:
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();
});
});
第五行使所有itens里第5项后切换,但我该怎么办时,我点击第一个孩子,仅此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/
..当之无愧+1 – 2012-04-23 18:17:11
..感谢很多! – 2012-04-27 15:37:22