點擊後，顯示（）內容在選定元素的行下面？

我想要做的是建立一個團隊頁面。類似於http://www.razorfish.com/people/ourpeople.htm 點擊後，顯示（）內容在選定元素的行下面？

我想創建一個浮動或行內元素行，並在選定元素下的每個內聯元素內顯示隱藏內容。因此，進一步向下移動下一行。
不過，我是JavaScript的新手。

這是我現在有：jsfiddle

// var tag = $(this).parent().find(".hidden-info"); 
// var prevStyle = tag.attr('style'); 

$('.profile-header').click(function(){ 

//$('.hidden-info').show(); 
$(this).parent().find(".hidden-content").toggle(); 
//return false; 

$(this).parent().find(".hidden-content").append(".people"); 
$(this).parent().find(".hidden-content").css("position","relative", "z-index","99"); 

});

有沒有人對如何去實現這一目標的任何想法？

來源

2014-01-14 bwhizzy

如果您認爲Razorfish的頁面上查看源代碼'/ JS/people.js'有所有你需要的答案。你可以快速去混淆它... – srquinn

我試過了，但我想我可以繼續修補它。 – bwhizzy

而不是遍歷使用.parent()和.find()的DOM，你可以簡單地指定選擇背景：

$('.profile-header').click(function(){ 
    var $this = $(this), 
     hidden_content = $(".hidden-content", $this); 

    hidden_content.toggle().toggleClass("people"); 
});

你append書面不會做任何事情。如果您嘗試更改類，則應考慮使用addClass或toggleClass，並將您的CSS添加到新類中，而不是在JavaScript中更改CSS。

來源

2014-01-14 21:48:19 nullability

在每行人的下方放置一個.people-data div。在每個人點擊時，找到與該行對應的.people-data並用數據填充它。

$('.profile-header').parent().find('.people-data') // populate and show

編輯：

如果你希望它是反應迅速，將每個人下.people-data，並展開它你會連續以同樣的方式。如果你有每個人的項目，這將工作display:inline-block

來源

2014-01-14 21:50:56 Phil

我忘了提及我希望這個團隊部分能夠做出反應。所以，如果我在每行下面放置一個「.people-data」，它不會正確地工作正確嗎？ – bwhizzy

我做了一個編輯。你必須弄清楚如何顯示div，但是如果你增加每個人物品的高度，它下面的任何「塊」都會下移。 – Phil

的主要變化是：

設置display: none;而不是float: left;到li的
設置position: absolute;和left: 0px;到.hidden-content
設置選擇li的高度以編程方式拉下一行
切換以前的選擇ected li的隱藏老款細節

See working fiddle sample here.

來源

2014-01-14 22:54:10 falsarella

呦！謝謝，這正是我所需要的。我發現了一個小問題，我試圖弄清楚，但你可能會更快。我注意到，當點擊鏈接很多時，最下面的一行並沒有正確地向下移動。 – bwhizzy

點擊後，顯示（）內容在選定元素的行下面？

回答

相關問題