jquery - 相对于页面上的元素将 div 滑出

Question

这个问题涉及如何滑出一个 div，现在可以正常工作了。

但是——我早该预见到这一点——div 在相对于页面左上角的位置滑出。我将我的正文标签设置为 1200 像素(更改它不是我需要的布局的选项)。我需要将其定位，以便弹出 div 的右侧边缘正好位于单击的“查看 TDM 状态”单元格的左侧边缘。

所以，这是一个表格示例，其中的 div 滑出。

如您所见，div 稍微偏向我想要的位置的右​​侧。我在另一台具有不同屏幕分辨率的计算机上进行开发，上面的屏幕截图是在不同的屏幕分辨率下进行的。

那么，在 div 滑出后，如何让 div 的右手边缘位于单击单元格的左手边缘？

代码示例:

HTML:这是表格中包含用户单击的单元格的一行:

<div id="siteDataRow-5" class="rowDataSites divRow">
    <div class="cellDataEditDelBtns divCell userSitesCol1">
        <button class="btnDeleteSite buttonStyle">Delete</button>
        <button class="btnEditSite buttonStyle">Edit</button>
    </div>
    <div class="cellDataSiteName divCell userSitesCol2">
        <label class="lblSiteName">Oskaloosa</label>
    </div>
    <div  class="cellDataServerLoc divCell userSitesCol3">
        <label class="lblSiteServerLoc">888.888.888.888</label>
    </div>
    <div class="cellDataSolCtrNum divCell userSitesCol4">
        <label class="lblSiteSolCtr">SQL123</label>
    </div>
    <div class="cellDataPM divCell userSitesCol5">
        <label class="lblSitePm">John Smith</label>
    </div>
    <div class="cellDataStatusNotes divCell userSitesCol6">
        <label class="lblSiteNotes">Hopefully this will have formatted text in it.</label><br>
        <br>
        <label class="lblLnkAddEditNotes mouseHand">Add/Edit Notes</label>
    </div>
    <div class="cellDataViewTdmStatus divCell userSitesCol7">
        <label class="lblViewTdmStatus mouseHand">View<br>TDM<br>Status</label>
    </div>
</div>

用户点击最后一个单元格中的标签，使div滑出。

这是滑出的div:

<div id="tblTdmStatusData" class="divTbl">
    <div class="divRow">
        <div class="divCell containerCell">
            <div class="divTbl subTbl">
                <div class="divRow">
                    <div id="statusSuApTdm" class="divCell tdmCell firstCell">
                        <span class="ui-icon ui-icon-check"></span>
                    </div>
                    <div id="statusSuArTdm" class="divCell tdmCell">
                        <span class="ui-icon ui-icon-check"></span>
                    </div>
                    <div id="statusSuClinTdm" class="divCell tdmCell">
                        <a href="#">Clin</a>
                    </div>
                    <div id="statusSuGlTdm" class="divCell tdmCell">
                        <a href="#">GL</a>
                    </div>
                    <div id="statusSuPayTdm" class="divCell tdmCell">
                        <a href="#">Pay</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="divCell containerCell">
            <div class="divTbl subTbl">
                <div class="divRow">
                    <div id="statusParApTdm" class="divCell tdmCell firstCell">
                        <a href="#">AP</a>
                    </div>
                    <div id="statusParArTdm" class="divCell tdmCell">
                        <a href="#">AR</a>
                    </div>
                    <div id="statusParClinTdm" class="divCell tdmCell">
                        <a href="#">Clin</a>
                    </div>
                    <div id="statusParGlTdm" class="divCell tdmCell">
                        <a href="#">GL</a>
                    </div>
                    <div id="statusParPayTdm" class="divCell tdmCell">
                        <a href="#">Pay</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="divCell containerCell">
            <div class="divTbl">
                <div class="divRow">
                    <div id="statusActApTdm" class="divCell tdmCell firstCell">
                        <a href="#">AP</a>
                    </div>
                    <div id="statusActArTdm" class="divCell tdmCell">
                        <a href="#">AR</a>
                    </div>
                    <div id="statusActClinTdm" class="divCell tdmCell">
                        <a href="#">Clin</a>
                    </div>
                    <div id="statusActGlTdm" class="divCell tdmCell">
                        <a href="#">GL</a>
                    </div>
                    <div id="statusActPayTdm" class="divCell tdmCell">
                        <a href="#">Pay</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS:这是将 div 滑出的工作 js:

$('.lblViewTdmStatus').click(function() {
    // Get the position of the label that was clicked on
    var position = $(this).position(),
        left = position.left,
        top = position.top,
        divLeft = position.left - 588,
        divTop = position.top - 32;
    //console.log('Left position: ' + divLeft + ' Top position: ' + divTop);

    // Position the div
    $('#tdmStatus').css('top',divTop).css('left',divLeft);

    // Slide the div out
    $('#tdmStatus').toggle('slide',{direction:'right'},500);
});

Answer 1

如果没有真实的例子，解释起来有点困难。

为了让它位于标签的左边缘，我会添加 position: relative;到包装容器(包含所有行)并添加 position: absolute;到滑动元件。然后计算或知道(如果它是固定的)点击标签单元格的宽度并以这种方式更改您的 javascript:

...
// Position the div
    $('#tdmStatus').css('top',divTop).css('right', labelWidth);
...

我不确定这是否会如您所愿。如果您创建一个 fiddle 或发送一个链接到真实的一面，会更容易提供帮助。