我正在使用这个:
jQuery('.class1 a').click( function() {
if ($(".class2").is(":hidden")) {
$(".class2").slideDown("slow");
} else {
$(".class2").slideUp();
}
});
在页面结构上:
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
它只适用于没有多个class1 / class2集合的情况:
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
如何更改初始jquery代码,以便它只影响被单击的class1下的类2?我试过qazxsw大便的推荐但没有成功。
使用HTML的最佳方法可能是使用How to get the children of the $(this) selector?函数,如下所示:
next
由于点击处理程序发生在var div = $(this).next('.class2');
上,您还可以遍历到父DIV,然后搜索第二个DIV。你可以用<a>
和parent
的组合来做到这一点。如果您提供的HTML不完全相同,并且第二个DIV可能位于相对于链接的另一个位置,则此方法最佳:
children
如果您希望“搜索”不仅限于直接子项,则在上面的示例中使用var div = $(this).parent().children('.class2');
而不是find
。
此外,如果可能的话,最好在您的类选择器前加上标签名称。即,如果只有children
标签将有这些类,使选择器为<div>
,div.class1
。
在单击事件中,“this”是单击的标记
div.class2
虽然您也可以使用.siblings,.next等,但有多种方法可以访问div
这与jQuery('.class1 a').click( function() {
var divToSlide = $(this).parent().find(".class2");
if (divToSlide.is(":hidden")) {
divToSlide.slideDown("slow");
} else {
divToSlide.slideUp();
}
});
相比要简单得多:
.slideToggle()
编辑:使用.next而不是.siblings
jQuery('.class1 a').click( function() {
$(this).next('.class2').slideToggle();
});
您还可以添加cookie以记住您所在的位置...