如何修复此jQuery SlideToggle? [英] How to fix this jQuery SlideToggle?

问题描述

我想做的是单击dl/dt图库中的图像时，独立地滑动一行图像下的文本div，如下所示:

What I'm trying to do is independently slidetoggle text divs under a row of images when those images - in a dl/dt gallery - are clicked, like so:

但是，当然，我至少在做错几件事.标记位于jQuery Tab中可能会很复杂，但事实并非如此. jsfiddle此处: http://jsfiddle.net/Yfs2V/8/

But of course I'm doing at least a few things wrong. Could be complicated that the markup is in a jQuery Tab, but that may not be the case. 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)*

推荐答案

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

There are a couple of problems going on here. I think the main being the selectors you are using to access the click on the book and also its text doesn't appear to be linked to the book gallery item in any way.

我已经在此处

基本更改为 HTML :

<dl class="gallery" rel="one">

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

Add a rel="blahh" to the dl of each book, this will correspond to the text div

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

在包含书籍文字的div中添加id="blah"

Add an id="blah" to the div that contains the text for the book

jQuery 的更改:

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

选择器现在使用id="bookimggallery"

选择div中的所有dt.

然后从rel="blah"获取 id ，然后对其进行滑动切换.

The selector now selects all dt's within the div with the id="bookimggallery"

It then gets the id from the rel="blah", then slideToggles it.

在没有完全重新布置代码布局的情况下，这就是我要这样做的方式.

Without completely rearranging your code layout this is how I would do this.

这篇关于如何修复此jQuery SlideToggle?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！