如何修复这个 jQuery SlideToggle？

Posted 2023-02-25

【中文标题】如何修复这个 jQuery SlideToggle？

【英文标题】：How to fix this jQuery SlideToggle?

【发布时间】：2011-04-29 21:26:31

【问题描述】：

我正在尝试做的是当单击 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  src=""></dt>
        <dt>Image Title One</dt></dl>

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

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

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

    <dl class="gallery"><dt><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)*

【参考方案1】：

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

我修改了你的code slightly here

基本的变化是HTML：

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

在每本书的dl 中添加一个rel="blahh"，这将对应于文本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 中的所有dt 和id="bookimggallery" 然后它从rel="blah" 获取id，然后滑动切换它。

如果不完全重新安排您的代码布局，我会这样做。

【讨论】：

谢谢，很好的修复。还在学习 jQuery。我发现的一个问题是，在整个页面加载时，所有 .bkcontent div 都将显示为展开状态，因此我将$(".bkcontent").hide(); 添加到一个文档就绪函数中，该函数在完全加载之前隐藏选项卡 CSS，并且有效。跨度>

【参考方案2】：

你的类是bookimggallery而不是imagegallerydiv，另一方面，文本不是<dl>元素的子元素，所以$(this).parent().children(".bkcontent")不包含任何元素。

【讨论】：

谢谢，修复了#bookimggallery。如何在 booktextdiv 中选择元素？

【参考方案3】：

检查this reference，您对 DL/DT/DD 的使用似乎有点不对劲。

考虑将您的 html 重新组织为

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

  <dt class="gallery"><dt><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);
);