如何修复这个 jQuery SlideToggle？

Question

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

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

我认为该函数有问题：

jQuery 函数：

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

HTML：

<div id="bookimggallery">

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title One</dt></dl>

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title Two</dt></dl>

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title Three</dt></dl>

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title Four</dt></dl>

    <dl class="gallery"><dt><img alt="img" src=""></dt>
        <dt>Image Title Five</dt></dl>

</div>

<div id="booktextdiv">

<div class="bkcontent">Lorum Ipsum....</div>

<div class="bkcontent">Lorum Ipsum....</div>

<div class="bkcontent">Lorum Ipsum....</div>

<div class="bkcontent">Lorum Ipsum....</div>

<div class="bkcontent">Lorum Ipsum....</div>

</div>

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 class="gallery" rel="one">

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

<div class="bkcontent" id="one">

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

jQuery 更改：

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

选择器现在会选择 div 中带有 id="bookimggallery" 的所有 dt。

It然后从 rel="blah" 获取 id，然后滑动切换它。

在不完全重新安排代码布局的情况下，这就是我的做法。

Answer 2

对于一个类，您的类是 bookimggallery 而不是 imagegallerydiv，对于另一个类，文本不是您的

元素的子元素，因此 < code>$(this).parent().children(".bkcontent") 不包含任何元素。

Answer 3

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

考虑将您的 html 重新组织为

<dl>
  <dt class="gallery"><img alt="img" src="">Image Title One</dt>
  <dd> description text one</dd>

  <dt class="gallery"><dt><img alt="img" src="">Image Title Two</dt>
  <dd> description text two</dd>
</dl>

您的 jquery 然后看起来像

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