切換div，但只能一次顯示一個

我有一些縮略圖slideToggle隱藏的div。我只希望一個人立即保持開放。所以當下一個縮略圖被點擊時，打開的div會關閉，然後新的縮略圖會打開。切換div，但只能一次顯示一個

我是用show和hide做的，但是看起來很糟糕，因爲我從slideToggle中刪除了動畫。

那麼隱藏所有切換的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來切換（但多個div可以用這個打開...）：

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

來源

2012-03-06 patricko

把一個類上的所有可擴展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的數據目標元素，你希望他們擴大股利，那麼你止跌」 t需要爲n個圖像編寫n個函數。

等待，直到他們打開你可以使用一個延遲之前關閉，或者你可以做

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

來源

2012-03-06 21:11:06 bhamlin

這個效果很好，但是整個div會關閉然後再打開嗎？現在div並沒有完全關閉，內容交換出來，div又開始打開。它看起來不太平滑。 – patricko 2012-03-06 21:15:54

謝謝！我在slideDown上放了一個延遲，它使slideUp時間完成，看起來很平滑。 – patricko 2012-03-06 21:18:18

如果您希望它們在打開之前全部關閉，可以將其放入slideUp（）的回調中。但是，您需要小心一點，因爲每個元素動畫都會調用一次回調 - 在這種情況下，會有3次回調。所以在回調中你需要檢查'this'的id。我會給我的答案添加一個例子。 – bhamlin 2012-03-06 21:21:56

這不正是你想要的，但這是我能做的最好的，以我有限的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')">

來源

2012-03-06 21:08:39 Anthony

給像項的公共類的名稱。這使得在同一時間連接到處理整個集合

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

來源

2012-03-06 21:13:25 charlietfl

我認爲這會做你想要

$('#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(); 
    });

來源

2012-03-06 21:19:04 abney317

讓別人做的工作是什麼爲你！

這聽起來像你正在尋找一個「旋轉木馬」型顯示屏，並有bajillions of free plugins。或者，如果你只是想要一個「標籤」效果，我會推薦jQueryUI。你必須學會使用你選擇的任何插件，但是大多數插件很容易開始使用，並且最終產生更好的結果，而你的工作量更少。

希望有幫助！

來源

2012-03-06 21:21:14

切換div，但只能一次顯示一個

回答

相關問題