单击图像显示/隐藏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(); } }); }); 
  img 

Title

text

试试这个:

  $('.show_hide').click(function(e) { $(e.target).parent().next('.slidingDiv').slideToggle(); }); }); 

e.target为您提供click event的源DOM元素

将两者包装在同一个div中并执行以下步骤:

  1. 使用.parent()查找图像的父级
  2. 使用.find()查找父级的.slidingDiv
  3. 使用.slideToggle()隐藏/显示.slidingDiv
 $(document).ready(function() { $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function() { $(this).parent().find(".slidingDiv").slideToggle(); }); }); 
 .fleft{ float: left; } 
  

Title

text

Title

text

Title

text