Question

我有一些缩略图，可以滑动隐藏的div。我只想让一个人立刻保持开放。因此，当单击下一个缩略图时，打开的div关闭，然后打开新的。

我用show和hide来做这个，但看起来很糟糕，因为我从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();
    });

Answer 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();
    }
});

Answer 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()
})

Answer 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')">

Answer 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();
    });

Answer 5

让其他人为你工作！

听起来你正在寻找一个“旋转木马”型显示器，并且有bajillions of free plugins。或者，如果您只想要“标签”效果，我建议jQueryUI。你必须学会使用你选择的任何插件，但大多数插件都非常简单，并且最终会产生更好的效果而你的工作量会减少。

希望有所帮助！

切换div，但只有一次显示

5 个答案: