点击当前节点,如果获取下一个节点?JQuery

qingYun1029 2012-10-28 08:34:49
最近需要用到“手风琴”jquery控件,可是样式什么的不好弄,还有就是不能全部展开,所以打算自己写一个。。

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

参考里面的html结构。


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


我的思路上是找到acc下面的所有h3标签,然后赋予单击事件,找出下一个节点是显示还是隐藏,然后赋予相反的css效果。
...全文
4809 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
qingYun1029 2012-10-30
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 的回复:]

JScript code
$(function () {
$("#acc div").hide();
$("#acc h3").click(function() {
//知道这个前提:div在h3之后,且两种元素索引同步。要找div方法就多了
//$("#acc").children().eq($(this).index()+1).toggle(……
[/Quote]

牛啊,怎么记得了这么多??

qingYun1029 2012-10-29
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 的回复:]

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


谢谢啦!!!
泡泡鱼_ 2012-10-28
  • 打赏
  • 举报
回复
$(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中的索引值
});
});
泡泡鱼_ 2012-10-28
  • 打赏
  • 举报
回复
click事件中的那么老长的判断,直接写成一句:$(this).next("div").toggleClass('hidden');即可
如果你的样式hidden仅仅是:display:none
那直接写成:$(this).next("div").toggle();就已经可以了
当然,前面的$("#acc div").addClass("hidden");也要改成$("#acc div").hide();
qingYun1029 2012-10-28
  • 打赏
  • 举报
回复
还有更好的方法么?

qingYun1029 2012-10-28
  • 打赏
  • 举报
回复
自己试出来了。。。

哈哈!!

$(function () {
$("#acc div").addClass("hidden");
$("#acc h3").click(function () {
if ($(this).next("div").hasClass("hidden")) {
$(this).next("div").removeClass("hidden");
} else {
$(this).next("div").addClass("hidden")
}
});
});

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧