How to fix this jQuery SlideToggle?

问题

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:

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/

I think the function is problematic:

jQuery function:

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

the 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>

the 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)*

回答1:

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.

I have modified your code slightly here

The basic changes are HTML:

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

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

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

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

The jQuery changes:

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

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.

回答2:

Well for one your class is bookimggallery and not imagegallerydiv, for another, the text is not a child of your <dl> elements so $(this).parent().children(".bkcontent") doesn't contain any elements.

回答3:

Checking this reference it looks like your use of DL/DT/DD is slightly off.

Consider reorganizing your html to

<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>

Your jquery would then look like

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

来源：https://stackoverflow.com/questions/5837563/how-to-fix-this-jquery-slidetoggle

标签

jquery

slidetoggle