单击时，show（）内容在选定元素的行下方？

Question

我想做的是建立团队页面。 类似于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");

});

是否有人对如何实现这一目标有任何想法？

Answer 1

.parent()使用.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。

Answer 2

在每.people-data下放置一个.people-data div。 在每个人单击时，找到与该行相对应的.people-data ，并在其中填充数据。

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

编辑：

如果希望它具有响应能力，请将.people-data放在每个人下面，并以与行相同的方式扩展它。 如果您display:inline-block每个人项目，这将起作用display:inline-block

Answer 3

关键更改是：

• 设置display: none; 而不是float: left; 到li
• 设定position: absolute; left: 0px; 到.hidden-content
• 以编程方式设置所选li的高度以拉下一行
• 切换先前选择的li以隐藏旧的细节部分

请参阅此处的工作提琴样本。