Q

添加類似於手風琴的設置？

2012-01-11 47 views 0 likes

0

我希望能夠將整個Accordion Aspect添加到jsFiddle中的這段代碼中。如果你展開一個，然後點擊另一個它摺疊以前的div並顯示最近點擊的位置。添加類似於手風琴的設置？

任何想法，我怎麼能通過這個jsFiddle完成這個？

http://jsfiddle.net/zrbFE/

謝謝大家！

2012-01-11 Aaron Brewer

+1

使用jquery ui手風琴http://jqueryui.com/demos/accordion/ – 2012-01-11 15:12:41

A

回答

1

http://jsfiddle.net/fAmWx/1/

這可能會幫助你在正確的方向開始。這個想法是簡化和重用類名和代碼。

2012-01-11 15:37:00 Detect

+0

這一個完全工作，當我崩潰它，雖然內容關閉了一半，然後只是消失，而不是完全開放和完全關閉？任何想法？ – 2012-01-11 15:43:29

+1

不確定。你可以放慢幻燈片 - http://jsfiddle.net/fAmWx/2/這有幫助嗎？ – Detect 2012-01-11 15:50:36

+0

是的，它確實是先生！這非常有幫助！謝謝！還有一個問題：一旦我點擊另一個ITEM，我怎樣才能讓圖像返回到原始的SRC？ http://jsfiddle.net/fAmWx/7/。當我點擊另一個EXPAND ITEM項目時，圖像不會恢復到原始狀態。 – 2012-01-11 16:12:38

1

我做了這個前一段時間，認爲這將滿足您的需求：http://jsfiddle.net/aCaEG/2/

2012-01-11 15:13:02 Johan

+0

太棒了！但是，我會如何將這個應用到我的jsFiddle Code？看到我正在使用DIV反對無序列表？ – 2012-01-11 15:14:55

+1

@AaronBrewer div和ul：s都是display：block。你不應該有任何問題適用於你的div。看起來像jsfiddle目前對我來說很糟糕。 – Johan 2012-01-11 15:27:20

+0

但我怎麼能應用這個在這裏，在我的代碼？ http://jsfiddle.net/zrbFE/ – 2012-01-11 15:30:07

1

我喜歡這個庫來實現該功能：

http://flowplayer.org/tools/demos/tabs/accordion.html

方式比jQuery UI的輕，精美的作品。檢查該頁面的示例，瞭解如何標記它並在腳本中調用它。

2012-01-11 15:15:08 Jon

+0

我不能有一個默認顯示的DIV。謝謝你！ – 2012-01-11 15:30:51

+1

這個庫將允許您在默認情況下摺疊所有內容，或者顯示特定的手風琴選項卡，或顯示所有這些選項。它的設計是完全可定製的。如果您在示例中省略「display：block」，則默認情況下所有內容都將顯示爲摺疊狀態。 – Jon 2012-01-11 15:44:15

1

試試這個爲你的jsfiddle：

function toggleMe(me) { 
    var alreadyOpen = me.is(':visible'); 
    jQuery('div[class^="content-"]').hide('fast'); 
    if (!alreadyOpen) { 
     me.show('slow'); 
    } 
} 
jQuery('.expand-one').click(function() { 
    toggleMe(jQuery('.content-one')); 
    var img = $(this).find('img'), 
     src = img.attr("src"), 
     alt = img.data("altsrc"); 
    img.attr("src", alt).data("altsrc", src); 
}); 
/// SECOND SESSION: 
///////////////////////////////////////////////////////////////////////////////////// 
jQuery('.expand-two').click(function() { 
    toggleMe(jQuery('.content-two')); 
    var img = $(this).find('img'), 
     src = img.attr("src"), 
     alt = img.data("altsrc"); 
    img.attr("src", alt).data("altsrc", src); 
});

希望這有助於

皮特

2012-01-11 15:15:46 pete

+0

這似乎是做的工作，但如果我點擊相同的一個關閉它，然後重新打開，它也不適用圖像代碼，如果我點擊一個「EXPAND」Div。 – 2012-01-11 15:31:40

+0

非常感謝您的幫助！ – 2012-01-11 15:43:40

+1

好的，如果點擊兩次，修改爲崩潰。我刪除了切換函數，因爲切換已經內置到jQuery中，因此不需要重新定義它。就IMAGE代碼而言，您的jsfiddle在源HTML中沒有圖像聲明。添加它們來測試你的交換alt和src。 – pete 2012-01-11 15:59:55

相關問題