隱藏一個div並顯示其他div

-2

我有三個div S：div1，div2，div3。
當我點擊div1時，它向上滑動並被移除，同時，div2向上滑動並變得可見。
同樣，點擊div2時，div2向上滑動，並得到去除，並作爲div2是向上滑動，div3開始向上滑動變得可見。

我無法弄清楚如何做到這一點。任何幫助將不勝感激。

2015-04-16 user782400

聽起來像你需要一個手風琴小部件。檢查了這個https://jqueryui.com/accordion/ – user2085955

此示例代碼作用於所有div。您可以將選擇器更改爲特殊類或ID。

$(document).ready(function(){ 
    $("div").click(function(){ 
    $(this).slideUp().next("div").slideDown(); 
    }); 
})

你的情況

這就夠了：

$("#div1").click(function(){$(this).slideUp();$("#div2").slideDown(); 
$("#div2").click(function(){$(this).slideUp();$("#div3").slideDown();

來源

2015-04-16 22:39:41

是的，這將工作，但點擊最後一個元素會使它消失。使用這種方法，您將不得不添加如下內容：if（$（this）.is（「div：last-of-type」））{$（「div：first-of-type」）。 };使其再次顯示第一個div。這絕不是解決問題的最佳方法。 –

謝謝。這個問題沒有嘗試所以我寫了一個普遍的答案。在您的評論之後，我添加了案例解決方案，但是這種非常規解決方案對我沒有吸引力！ –

我同意。我不知道爲什麼用戶會以這種方式迭代div元素。如果你有三個以上的元素，如果你想從第六個跳到第二個，那該怎麼辦？我個人會選擇手風琴。 –

我會建議使用jQuery做到這一點。特別檢查animate()函數。現在有許多不同的方法來實現這種效果，並且根據需要的結果它們將有不同的實現。我有一個JSFiddle鏈接，下面我給你一個這樣的例子。

在這個例子中，我有一個包裝div，它有overflow: hidden作用於它作爲「隱藏邊界」。然後，我將這3 div的包裝放在一個滑動包裝中，以便垂直滑動。然後，我所做的只是將一個點擊事件添加到#first和#seconddiv的移動#slideWrapper由適當的保證金與jQuery $.animate()功能提供的動畫效果。這應該給你一個開始的好地方。

https://jsfiddle.net/ph7ryon3/2/

來源

2015-04-16 22:44:32

隱藏一個div並顯示其他div

回答

相關問題