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()和.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 div。在每个人点击，找到与该行对应的.people-data并用数据填充它。

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

编辑：

如果您希望它具有响应能力，请将.people-data置于每个人的下方并按照与行相同的方式展开。如果您有每个人物品display:inline-block

，这将有效

Answer 3

关键变化是：

将display: none;代替float: left;设置为li
将position: absolute;和left: 0px;设为.hidden-content
以编程方式设置所选li的高度以将下一行拉下来
切换之前选择的li以隐藏旧详细信息部分

See working fiddle sample here.

点击，在所选元素的行下面显示（）内容？

3 个答案: