jquery - 如何修复这个 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

这里出现了一些问题。我认为主要是您用来访问书籍点击的选择器，而且它的文本似乎没有以任何方式链接到书籍库项目。

我修改了你的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 ，然后滑动切换它。

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