如何修复这个jQuery SlideToggle？

Question

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

但我当然至少做了一些错事。标记在jQuery选项卡中可能很复杂，但情况可能并非如此。 jsfiddle here： 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

对于您的课程bookimggallery而不是imagegallerydiv，对于另一个，该文字不是您的<dl>元素的子文，因此$(this).parent().children(".bkcontent")不包含任何内容元件。

Answer 2

检查this reference，看起来您对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);
});

Answer 3

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

我修改了您的code slightly here

基本更改为 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); 
});

选择器现在使用dt

选择div中的所有id="bookimggallery"

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

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