切换 div，但一次只显示一个答案

【问题标题】：toggle divs, but only have one shown at once切换 div，但一次只显示一个
【发布时间】：2012-03-06 21:01:55
【问题描述】：

我有一些缩略图可以滑动切换隐藏的 div。不过，我只希望一个保持开放。因此，当单击下一个缩略图时，打开的 div 会关闭，然后新的 div 会打开。

我用显示和隐藏来做这个，但它看起来很糟糕，因为我失去了 slideToggle 的动画。

那么隐藏所有切换的 div 然后打开新的 div 的最佳方法是什么？

这是我的 HTML：

<div id="mainContainer">
  <div id="rowOne">
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneLeftImage" />
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneMiddleImage" />
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneRightImage"/>
  </div>

  <div id="rowOneLeftImageHidden">
      This is information for the left image in the first row.
  </div>

  <div id="rowOneMiddleImageHidden">
      This is information for the middle image in the first row.
  </div> 

   <div id="rowOneRightImageHidden">
      This is information for the right image in the first row.
  </div>

和 Jquery to Toggle（但是可以用这个打开多个 div...）：

$('#rowOneLeftImage').click(function(){
        $("#rowOneLeftImageHidden").slideToggle();
    });
    $('#rowOneMiddleImage').click(function(){
        $("#rowOneMiddleImageHidden").slideToggle();
    });
    $('#rowOneRightImage').click(function(){
        $("#rowOneRightImageHidden").slideToggle();
    });

【问题讨论】：

标签： jquery html css jquery-animate

【解决方案1】：

在所有可扩展的 div 上放置一个类，例如 expandable。

<div id="rowOneLeftImageHidden" class="expandable">
  This is information for the left image in the first row.
</div>

<div id="rowOneMiddleImageHidden" class="expandable">
  This is information for the middle image in the first row.
</div> 

<div id="rowOneRightImageHidden" class="expandable">
  This is information for the right image in the first row.
</div>

您现在可以通过引用该类并使用 slideUp() 和 slideDown() 来折叠所有这些。

$('#rowOneLeftImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneLeftImageHidden").slideDown();
});
$('#rowOneMiddleImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneMiddleImageHidden").slideDown();
});
$('#rowOneRightImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneRightImageHidden").slideDown();

您可以通过对数据元素的一点创造性使用来避免所有这些重复的代码，例如让图像包含一个数据目标元素，其 id 为您希望它们展开的 div，那么您就不需要编写n 个图像的 n 个函数。

要等到它们关闭后再打开，您可以使用延迟，也可以这样做

$(".expandable").slideUp(function () {
    // this is called once the animation completes
    if ($(this).is("#rowOneLeftImageHidden")) {
        $(this).slideDown();
    }
});

【讨论】：

这很好用，但是有没有办法让整个 div 关闭然后重新打开？现在 div 并没有完全关闭，内容换出并且 div 再次开始打开。看起来不是很流畅。
谢谢！我在 slideDown 上放了一个延迟，它给了 slideUp 时间来完成，所以它看起来很流畅。
如果您希望它们在打开之前全部关闭，您可以将其放入 slideUp() 的回调中。但是，您需要小心一点，因为每个元素动画都会调用一次回调 - 在本例中为 3 次。所以在回调中你需要检查this 的id。我将在我的答案中添加一个示例。

【解决方案2】：

给类似的项目一个通用的类名。这允许一次将处理程序附加到整个集合

<div id="mainContainer">
  <div id="rowOne">
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneLeftImage"   class="image"/>
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneMiddleImage"   class="image" />
  <img src="IllinoisLottery_Thumbnail_Taller.jpg" id="rowOneRightImage"   class="image"/>
  </div>

  <div id="rowOneLeftImageHidden" class="image_text">
      This is information for the left image in the first row.
  </div>

  <div id="rowOneMiddleImageHidden" class="image_text">
      This is information for the middle image in the first row.
  </div> 

   <div id="rowOneRightImageHidden" class="image_text">
      This is information for the right image in the first row.
  </div

JS：

$('.image').click(function(){
        /* get index position of image*/                   
        var index=$(this).index();
        /* slide up visible text, slide down text matching image indesx*/
        $('.image_text:visible,.image_text:eq('+idx+')').slideToggle()
})

【讨论】：

【解决方案3】：

这并不是你想要的，但这是我能用我有限的 Javascript/JQuery 知识帮助你的最好方法。

function setVisibility(id) {
 if (document.getElementById('btnHide').value == 'Hide div') {
     document.getElementById('btnHide').value  = 'Show div';
     document.getElementById(id).style.display = 'none';
 } else {
     document.getElementById('btnHide').value  = 'Hide div';
     document.getElementById(id).style.display = 'block';
 }
}

还有其他地方：

<INPUT TYPE="button" id="btnHide"    Value="Hide div" onClick="setVisibility('div_name')">

【讨论】：

【解决方案4】：

我认为这会做你想要的

$('#rowOneLeftImage').click(function(){
        if($('#rowOneMiddleImage').is(":visible"))
            $("#rowOneMiddleImageHidden").slideToggle();
        if($('#rowOneRightImage').is(":visible"))
            $("#rowOneRightImageHidden").slideToggle();
        $("#rowOneLeftImageHidden").slideToggle();
    });
    $('#rowOneMiddleImage').click(function(){
        if($('#rowOneLeftImage').is(":visible"))
            $("#rowOneLeftImageHidden").slideToggle();
        if($('#rowOneRightImage').is(":visible"))
            $("#rowOneRightImageHidden").slideToggle();
        $("#rowOneMiddleImageHidden").slideToggle();
    });
    $('#rowOneRightImage').click(function(){
        if($('#rowOneMiddleImage').is(":visible"))
            $("#rowOneMiddleImageHidden").slideToggle();
        if($('#rowOneLeftImage').is(":visible"))
            $("#rowOneLeftImageHidden").slideToggle();
        $("#rowOneRightImageHidden").slideToggle();
    });

【讨论】：

【解决方案5】：

让别人为你做这项工作！

听起来您正在寻找“轮播”类型的显示器，并且有 bajillions of free plugins 用于此。或者，如果您只想要“标签”效果，我推荐jQueryUI。您必须学会使用您选择的任何插件，但大多数插件都非常容易上手，最终以更少的工作量产生更好的结果。

希望有帮助！

【讨论】：