Javascript PHP-Jquery，在每行下方显示快速详细信息滑块

最近我创建了一个网页，其中一行有12个框。它的特点是当我点击盒子时，它的快速细节框在盒子下面滑动打开，这很好。现在的问题是网页是有响应的，所以在正常的分辨率1366 x 768中有两行，每行有6个框

所以，当我单击任何框时，该框的“快速详细信息”滑块将在该2行下方打开。有关当前工作网页，请参阅下图

我使用PHP创建循环，该循环动态生成12个框。所以基本上我希望框1到6的快速细节滑块显示在第1行下面，其他7到12的滑块显示在第2行下面

创建框的代码结构循环

在第2行下方打开的快速详细信息滑块

JS代码对小型设备也禁用此功能

---

简言之，我的问题是，如果单击第1行的任何框，如何在第1行下方显示滑块？如果单击第2行的任何框，如何在第2行下方显示滑块？我构建了一个示例，向您展示了一种方法：

单击图像时，将清除该图像线下的间隙

加载时，行号与JS一起添加到数据行号属性中

如果调整窗口大小，将重新计算线条

编辑：这是马车，我今晚就完成

函数addrowNumber { var savedOffset=0，currentOffset，currentLineNumber=0； $ul li.eachfunction{ currentOffset=$this.offset.top； ifcurrentOffset>savedOffset{ savedOffset=currentOffset； currentLineNumber++； } $this.attrdata-line-number，currentLineNumber； }; $li.removeclass； $li.unbind； $li.onclick，函数{ var lineNumber=Number$this.attrdata-line-Number，currentOffset=$this.offset.top； $li.removeclass； $li[数据行号='+lineNumber+1+'].addClasspushed； $photo info.css{top:currentOffset+100+px}.show； }; } $function{ 添加行数； $window.onresize，函数{ 添加行数； }; }; 保险商实验室{ 列表样式：无； 保证金：0； 填充：0； } 李{ 显示：内联块； } 李：推 { 边缘顶部：100px； } img{ 高度：100px； } 照片信息{ 颜色：白色； 背景颜色：灰色； 显示：无； 高度：100px； 左：8px； 位置：绝对位置； } 照片信息照片信息照片信息照片信息照片信息

{foreach from=$data['campaign'] key=k item=value}

    <div class="thmbimg col-xs-6 col-md-2 col-sm-4 displayquickboxrow" id="{$value.id}" data-toggle="tooltip" data-placement="top" title="{$value.title}" >
        {if isset($value['ribbon'])}
            <div class="ribbonlisting">
                <div STYLE="color:{$value['ribbon_color']}">
                    {$value['ribbon_text']}  
                </div>
                <img src="/public/images/ribbons/{$value['ribbon']}" class="martop25" alt="" width="100px">
            </div>
            {/if}
        {if isset($value.picture)}
        {$img = $value.picture}
        <img src="/public/images/campaign/{$img}" alt="No Image" width="150" height="150" class="img-thumbnail">
<!--                                    <img src="{$path}{$img}" alt="No Image" width="150" height="150" class="img-thumbnail">-->
        {else}
        <img src="{$noimage}" alt="No Image" width="150" height="150" class="img-thumbnail">
        {/if}
    </div>

{/foreach}

<!--     Quick Campaign Detail Start       -->

{if isset($data['campaign'])}
{$path = $imagepath}
{$custpath = $imagepathuser}
{foreach from=$data['campaign'] key=k item=value}
<div class="col-md-8 mainobj divquickdetailrow{$value.id}" id="{$value.id}" style="display:none;">
    <div class="bdr padbtmremove" style="min-height:200px;">
        <table class="width100per" id="mydiv{$value.id}">
            <tr class="mydiv{$value.id}">
                <td rowspan="2" class="pad5 bdrright padright20">
                    {if isset($value['ribbon'])}
                    <div class="ribbonlisting">
                        <div STYLE="color:{$value['ribbon_color']}">
                            {$value['ribbon_text']}  
                        </div>
                        <img src="/public/images/ribbons/{$value['ribbon']}" class="martop25" alt="" width="100px">
                    </div>
                    {/if}
                    {if isset($value.picture)}
                    {$img = $value.picture}
                    <img src="/public/images/campaign/{$img}" alt="No Image" width="150" height="150" class="img-thumbnail">
                    {else}
                    <img src="{$noimage}" alt="No Image" width="150" height="150" >
                    {/if}
                </td>
                <td class="quickdetailhead">
                    <p>
                        {if isset($value.heading)} {$value.heading} {/if}
                    </p>
                    <div class="p">{if isset($value.title)} {$value.title} {/if}</div>
                    <div class="comments-space">{if isset($value.description)} {$value.description} {/if}</div>
                </td>
            </tr>
            <tr>
                <td class="quickdetail">
                    <table class="width100per">
                        <tr class="pad5 tblcellbtn">
                            <td class="bdrright tooltip_add" data-toggle="tooltip" data-placement="bottom" >


                                {if isset($smarty.session.employee_id)}

                                    {foreach from=$likedetail['savedetail'] key=k item=value1}
                                        {assign var="empID" value=$value1.id}
                                    {/foreach}

                                    {*---------------------------------------------------------------*}
                                    {if isset($empID)}
                                        {if $empID eq 0 or $empID === NULL}
                                            <a href= "/campaign/follow/{$value.id}" title="Save Campaign"><img src="/images/client/icon/1.png" class="width24"/> Save</a>
                                        {else}
                                            {if $value1.campaign_id eq $value.id}
                                                <a href= "/campaign/unfollow/{$value.id}" title="Remove Campaign" class="tooltip_add" data-toggle="tooltip" data-placement="bottom"><img src="/images/client/icon/7.png" class="width24"/>Remove</a>
                                            {else}
                                                <a href= "/campaign/follow/{$value.id}" title="Save Campaign"><img src="/images/client/icon/1.png" class="width24"/> Save</a>
                                            {/if}

                                        {/if}
                                    {else}                  
                                    <a href= "/campaign/follow/{$value.id}" title="Save Campaign"><img src="/images/client/icon/1.png" class="width24"/> Save</a>
                                    {/if}
                                {*---------------------------------------------------------------*}
                                {else}
                                    <a href="#!" data-toggle="modal" title="Save Campaign" data-target="#mdl-login"><img src="/images/client/icon/1.png" class="width24"/> Save</a>
                                {/if}


                            </td>
                            <td class="bdrright tooltip_add" data-toggle="tooltip" data-placement="bottom" title="Print Campaign">
                                <a href="#!" onclick="PrintElem('.mydiv{$value.id}')"><img src="/images/client/icon/2.png" class="width24" /> Print</a>
                            </td>
                            <td class="bdrright tooltip_add" data-toggle="tooltip" data-placement="bottom" title="Go To Store">
                                <a href= "{$value.url}" target="_blank"><img src="/images/client/icon/3.png" class="width24" /> Store</a>
                            </td>
                            <td class="bdrright tooltip_add" data-toggle="tooltip" data-placement="bottom" title="Share on FB">
                                <div class="fb-share-button" data-href="{$finaldata['id']}" data-layout="button_count"></div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>

    $('.displayquickboxrow').click(function(){
    //alert($(window).width());
    var id = this.id;
    if ($(window).width() <= 770) {
        window.location = "campaign/detail/"+id;
    }
    else
        {
        $div = $(".divquickdetailrow"+id);

        $(".mainobj").not($div).hide();


        $div.toggle('fast');
        }

    return false;
});