Question

我有一个包含标签的页面。每个标签包含不同的信息。一个选项卡是各个经销商的列表，每个经销商都有一个独特的位置。我现在需要为其中一个经销商添加一个手风琴效果，以便它显示所有28个位置。这是使用表格仍然有效的几次之一，因为它是一种网格格式。

我的问题是，由于此转销商数据存放在一个位于标签中的表中，是否可以

扩展页面长度
在此标签中展开内容区域的长度。
展开表格中的单元格区域以显示其他位置。
然后当再次点击时，一切都可以崩溃并返回单一列表。

授权转销商标签http://pro.sony.com/bbsc/ssr/show-projectors/resource.solutions.bbsccms-assets-show-projectors-laserprojectorslandingpage.shtml

Answer 1

你可以在你的经销商处添加一个新的TR，其中一个td里面的colspan为5，然后放入你认为意味着位置列表属于上面提到的经销商的任何元素。

    <tr>
        <td width="195" style="padding:5px;"><button onclick='showLocatoins(this, reselleridhere)'>Audio Visual Innovations (DBA: AVI/SPL)</button></td>
        <td width="165" style="padding:5px;"><a target="_blank" href="http://www.avispl.com">www.avispl.com</a></td>
        <td width="185" style="padding:5px;">6301 Benjamin Rd., Suite 101</td>
        <td width="140" style="padding:5px;">Tampa, FL 33634</td>
        <td width="75" style="padding:5px;">800-262-6733</td>
    </tr>


function showLocatoins(button, id) {
    loadMoreLocations(function (locations) {//assuming you have an async function for this already
         var td = $("<td colspan='5' class='extra locations'>");
         td.append("<span>more locations:</span>");
         _.each(function(location) {
             td.append("<div class='location'>".text(location));
         });

         td.append($("<button>").text("close").click(function () {td.parent().remove();}));
         //in case you want to give the user a way to close...             

         $(button.parentNode).after($("<tr>").append(td));
    })
}

手风琴效果和表格

1 个答案: