試圖隱藏對象/創建摺疊效果

我試圖創建一個相當獨特的效果。其實並不複雜，我想要做的是建立一個實驗性網站，我已經完成了。我似乎無法弄清楚如何去做最後一步。試圖隱藏對象/創建摺疊效果

所以這是我的地盤我與http://www.dig.ital.me/sandbox/about-me/

什麼，我試圖做的是塌陷具有文本在它的左側欄中修修補補：「在製造等等等等等等等等。「通過點擊：「點擊此隱藏此」。

我嘗試着去做一個與名字鏈接相關的錨鏈接並調用display：none當鏈接被點擊時。但是，它不起作用。所以我想我會嘗試使用stackoverflow，我會怎樣才能在崩潰的時候實現這種效果，然後重新打開。

#hide-option { color:#FFF; width:500px; height:500px; padding-left:170px;} 
#hide-option:hover .fixedfooter { 
display:none; 
cursor:pointer; }

下面是hide-option div id的一個片段。我已經耗盡了很多路線來嘗試實現這種效果，但我似乎無法弄清楚。我已經嘗試過：onClick類和nth子類，但似乎沒有任何工作。

來源

2012-05-03 Monstr92

// Store the footer as a variable, so we don't have to keep calling jQuery's selector engine 
// It's slower than a tortoise stuck in a traffic jam. 
var target = $('.fixedfooter'); 

// Every time the hide-option link is clicked 
$('#hide-option a').click(function() { 

    // If the left position of the target is 0 
    if(parseInt(target.css('left')) == 0) { 
     // Check the target is not animated and, if it is, animate off screen 
     !target.is(':animated') && target.animate({left: -751}, 250); 
    } else { 
     // Assume it's hidden, and put it back to the start 
     !target.is(':animated') && target.animate({left: 0}, 250); 
    } 

    // Stop the link being followed 
    return false; 

});

來源

2012-05-04 08:50:46 visualidiot

嘿快問。我不確定發生了什麼，但您必須首先雙擊鏈接關閉它。你知道背後的原因是什麼嗎？點擊兩次後，只需點擊一下即可重新激活/激活。 – Monstr92

JQuery，JavaScript庫，將爲您解決所有問題。

$("el").bind("onclick",function(){$("el").toggle('slow');});

來源

2012-05-04 07:27:22 Christopher

嗯，我試圖尋找到jQuery的。我剛剛添加了上面的代碼，謝謝你的迴應。我以某種方式無法正常工作。因此，我導入了最新的Jquery版本並編寫，並將其鏈接爲css＃hide-option：onClick .fixedfooter { \t display：none; \t光標：指針; }我可能做錯了什麼？ – Monstr92

如果你只是想CSS3（如果你不關心IE6-8），這裏的東西，你可以嘗試：http://jsbin.com/isunoz/6/edit

我評論它儘可能的，我希望它有助於:)

我所做的是使用複選框輸入來決定是否顯示側邊欄。

通過將複選框輸入元素的側邊欄元素（div.fixedfooter）前面，並改變你的錨（箭頭）到一個標籤爲複選框，我能夠使用：檢查僞類和+選擇器來定位同級元素（在這種情況下，邊欄div.fixedfooter）。如果複選框被選中，側欄會移出屏幕，如果沒有選中，則會顯示側邊欄（left：0）。

因爲我已經使用了一些CSS3過渡動畫（轉變：左，4S緩解）:)

來源

2012-05-05 11:23:23 ImDom

很感謝演示！我必須嘗試一下！ – Monstr92

對於紙張摺疊效果，請參閱這個不錯的演示應用，https://developer.mozilla.org/zh-CN/demos/detail/paperfold-css/launch – amar

試圖隱藏對象/創建摺疊效果

回答

相關問題