Question

是否有人知道如何创建类似于http://spring.io/docs上创建的表格的表格？点击某个项目后，我对“弹出窗口”特别感兴趣。

Answer 1

以下是使用jQuery的示例：

<强> HTML

<div class="item">
    <div class="label">Label 1</div>
    <div class="dropdown">More info about label 1</div>
</div>

您有物品，带有标签和下拉列表。下拉列表设置为display:none并且位置为绝对位置，以允许它们与其他项重叠。

<强> CSS

.item{
    position:relative; /*Your dropdowns will relate to their parent item*/
}

.dropdown{
    /* ...some styles... */
    display:none;
    position:absolute;
}

然后，使用jQuery，您可以在项目上切换类.open，这样您就可以按需显示下拉列表。

<强> CSS

.open .dropdown{
    display:block;
}

<强>的jQuery

$('.item').on('click',function(){
    //if this item is already open
    if($(this).hasClass('open'))
    {   //close it
        $(this).removeClass('open');
    }
    else
    {   //or close everything and open this one
        $('.item').removeClass('open');
        $(this).addClass('open');
    }
});

或者，如果您想要更短的版本：

$('.item').on('click',function(){
    $(this).toggleClass('open').siblings().removeClass('open');
});

表格弹出Javascript

1 个答案:

JS Fiddle demo