点击当前节点，如果获取上一个节点？JQuery

点击当前节点，如果获取下一个节点？JQuery
最近需要用到“手风琴”jquery控件，可是样式什么的不好弄，还有就是不能全部展开，所以打算自己写一个。。

研究了一下，jquery的源文件，感觉太复杂了，所以想根据自己的思路来写。。。

参考里面的html结构。

HTML code

<div id="acc">    <h3>第一页</h3>    <div>1111111111111111111111</div>    <h3>第二页</h3>    <div>22222222222222222222222222</div>    <h3>第三页</h3>    <div>3333333333333333333333333333333</div></div>

我的思路上是找到acc下面的所有h3标签，然后赋予单击事件，找出下一个节点是显示还是隐藏，然后赋予相反的css效果。

[解决办法]
click事件中的那么老长的判断，直接写成一句：$(this).next("div").toggleClass('hidden');即可
如果你的样式hidden仅仅是:display:none
那直接写成:$(this).next("div").toggle();就已经可以了
当然，前面的$("#acc div").addClass("hidden");也要改成$("#acc div").hide();

[解决办法]

JScript code

$(function () {    $("#acc div").hide();    $("#acc h3").click(function() {        //知道这个前提：div在h3之后，且两种元素索引同步。要找div方法就多了        //$("#acc").children().eq($(this).index()+1).toggle();//从共同的父元素下使用eq(当前h3索引+1)进行查找        //$(this).siblings().eq($(this).index()).toggle();//$(this).siblings()可获取当前h3的同辈元素，在这些元素中，当前h3在同辈中的索引必定指向它的下一个元素，就是后面的div了        //$("#acc div").eq($(this).index()/2).toggle();//后面的div在所有div中的索引值=当前h3在同辈中的索引值/2        //$("#acc div").eq($(this).index("#acc h3")).toggle();//后面的div在所有div中的索引值=当前h3在所有h3中的索引值    });}); 

 

查看更多 下一篇