Question

这个问题涵盖了如何滑出一个div，现在工作正常。

但是 - 我应该已经看到了这一点 - div在相对于页面左上角的位置滑出。我的body标签设置为1200px（更改不是我需要的布局选项）。我需要对它进行定位，使得弹出div的右边缘位于被点击的“View TDM Status”单元格的左边缘。

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

Table with Flyout div showing

正如您所看到的，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

如果没有一个真实的例子，这有点难以解释。

要在标签的左边缘获取它，我会添加位置：relative;到包装容器（包含所有行）并添加position：absolute;到滑动元件。然后计算或知道（如果它已修复）单击的标签单元格的宽度并以这种方式更改您的JavaScript：

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

我不确定这是否会像你想要的那样起作用。如果你创建一个小提琴或发送链接到真实的一面会更容易帮助。

Answer 2

我不确定这会有所帮助，但我把一个无聊的小提琴放在一起，这可能是讨论的起点。 FIDDLE。（只需点击红色条即可开始此过程。）

这是CSS：

.sliderdiv {
    height: 50px;
    float: left;
    background-color: blue;
    color: white;
    display: none;
    border-radius: 10px;
}

因此，如果你将滑动div向左浮动，那么它将与其内容一样窄。

然后，如果它仍然撞到感兴趣的右侧列，我猜你要么必须向右移动它，要么稍微挤压内容。

相对于页面上的元素滑动div

2 个答案: