单击图像显示/隐藏div
我希望能够点击图像来显示/隐藏div(带文本)。 我有一个图像工作,但我有多个图像需要切换文本。
javascript代码
$(document).ready(function() { $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function() { $("slidingDiv").slideToggle(); }); });
HTML:
Title
text
所以这可行,但它只适用于一个图像+ div。 我想要第二个图像和div,但使用相同的slidingDiv
类,然后单击第二个图像切换第二个div显然切换两个div。
那么如何才能获得两个图像来切换自己的div,而不是在单击两个图像中的一个时同时切换两个div?
更改:
$("slidingDiv").slideToggle();
至
$(this).next(".slidingDiv").slideToggle();
jsFiddle示例
正如您所注意到的, $(".slidingDiv")
使用slidingDiv类选择所有元素。 要选择相对于单击元素的slidingDiv类,使用this
来引用要单击的元素,然后使用.next(".slidingDiv")
来选择下一个元素,只要它具有类slidingDiv。
你忘了添加"."
in $("slidingDiv").slideToggle();
你也可以用这个
JsFiddle示例
$(document).ready(function() { $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function() { //$(".slidingDiv").slideToggle(); var isvisible = $(this).next('.slidingDiv').is(':visible'); if ( isvisible ) { $(this).next('.slidingDiv').hide(); } else{ $(this).next('.slidingDiv').show(); } }); });
Title
text
试试这个:
$('.show_hide').click(function(e) { $(e.target).parent().next('.slidingDiv').slideToggle(); }); });
e.target
为您提供click event
的源DOM元素
将两者包装在同一个div中并执行以下步骤:
- 使用.parent()查找图像的父级
- 使用.find()查找父级的.slidingDiv
- 使用.slideToggle()隐藏/显示.slidingDiv