如何修复这个jQuery SlideToggle？

我想要做的是在点击这些图像（在dl / dt图库中）时，在一行图像下独立地滑动文本div，如下所示：

但我当然至少做了一些错事。 标记在jQuery选项卡中可能很复杂，但情况可能并非如此。 jsfiddle： http ： //jsfiddle.net/Yfs2V/8/

我认为这个function有问题：

jQuery函数：

$(".bkcontent").hide(); $("#bookimggallery dt").click(function() { $(".bkcontent").hide(); $(this).parent().children(".bkcontent").slideToggle(500); }); 

HTML：

 
 
 
Image Title One
 
 
Image Title Two
 
 
Image Title Three
 
 
Image Title Four
 
 
Image Title Five
 
 
 
Lorum Ipsum....
 
Lorum Ipsum....
 
Lorum Ipsum....
 
Lorum Ipsum....
 
Lorum Ipsum....
  

CSS：

 #bookimggallery { width: 600px; height:200px; margin:2px; text-align: center;} dl.gallery {width: 93px; text-align: center; float: left;} .gallery dt { width: 80px; margin-top:2px; font-size: .7em; text-align:center;} #booktextdiv span {display:none} *(omitted tabs CSS for clairity)* 

Answer 1

这里有几个问题。 我认为主要是你用来访问书上点击的选择器，它的文本似乎没有以任何方式链接到书库项目。

我在这里略微修改了你的代码

基本的变化是HTML ：

在每本书的dl中添加一个rel="blahh" ，这将对应于文本div

将id="blah"添加到包含该书文本的div中

jQuery改变了：

 $("#bookimggallery dt").click(function() { $(".bkcontent").hide(); var textid = $(this).parent('dl').attr('rel'); $('#'+textid).slideToggle(500); }); 

选择器现在选择div所有dt的id="bookimggallery"

然后它从rel="blah"获取id ，然后slideToggles它。

如果不完全重新排列代码布局，我就会这样做。

Answer 2

好吧，你的class级是bookimggallery而不是imagegallerydiv ，另一方面，文本不是你的

元素的孩子所以$(this).parent().children(".bkcontent")不包含任何元素。

Answer 3

检查此参考 ，看起来您使用DL / DT / DD略有偏差。

考虑将你的html重组为

 
 
Image Title One
 
 description text one
 
Image Title Two
 
 description text two
  

那你的jquery会是这样的

 $("dd").hide(); $("dt.gallery").click(function() { $("dd").hide(); // or $("dd:visible").slideToggle(500); $(this).next("dd").slideToggle(500); });