jquery - 如何通过放置在相关控件的上方或下方来在屏幕上保留下拉 div？

Question

应该是一个简单的，但我的搜索提出了不相关的问题。

基本上我已经为 ASP.Net 创建了一个自定义 DropDown CheckBoxList。

它使用像这个简化示例一样的嵌套 Div（列表/表格本身由 ASP.Net CheckBoxList 生成）：

<DIV class="dropDownComboxBoxList">
    <DIV class="dropDownControl">
        <DIV class="dropDownLeft">
            <INPUT class="dropDownEdit" type="text" > 
        </DIV>
        <DIV class="dropDownRight">
            <IMG class="img-swap" src="/Images/DropDown_off.gif"> 
        </DIV>
    </DIV>
    <DIV style="MIN-WIDTH: 300px; DISPLAY: none; MAX-HEIGHT: 150px" class="dropDownDiv">
        <TABLE style="WIDTH: 100%; HEIGHT: 40px" id="checkBoxList" class="dropDownTable">
            <TBODY>
                <TR>
                    <TD class="firstCheck">
                        <INPUT class="dropDownCheck" type="checkbox">
                        <LABEL class="dropDownLabel">All</LABEL>
                    </TD>
                </TR>
                <TR class="checkSel">
                    <TD>
                        <INPUT class="dropDownCheck" type="checkbox">
                        <LABEL class="dropDownLabel">Item 0</LABEL>
                    </TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
</DIV>

控件显示如下：

问题是当 Text 控件位于屏幕中间下方时，弹出 Div 应该出现在 Text 控件上方，就像任何其他标准下拉菜单一样，例如：

在 JQuery/CSS 中执行此操作的最简单方法是什么？

更新 - 我的第一次蹩脚测试尝试看起来像这样（但它跳起来的视觉效果很糟糕）：

function DropDown(id, idt) 
    $(id).toggle('fast', function () {
        if ($(id).css('display') != 'none') {
            var pos = $(id).height() + $(idt).height();
            $(id).css("margin-top", -pos+"px");
        }
    });
});

Answer 1

这实际上可行，但如果可能的话，我希望看到它改进，以使用最佳实践等：

function DropDown(id, idt) {
    var dd = $(id);
    var tb = $(idt);
    var pos = (tb.position().top > $(window).height() / 2 + $(document).scrollTop()) ? -(dd.height() + tb.height() + 9) : 0;
    dd.css("margin-top", pos + "px");
    dd.toggle(1, function () {
        ... Do more stuff in here
    });
}

剩下的问题包括：

• 您不能为切换设置动画（例如，使用“快速”，因为它会导致动画飞起来）。
• 它需要对位置偏移进行校正，以适应父 div 的填充。