日期:2014-05-16  浏览次数:20439 次

一个div位置的简单问题
我想实现一个简单的效果 就是点击文本框 div就出现在这个文本框下面 ,但下面的代码每次点击,这个div的left 跟top会累计,求帮助,问题出现在哪里?

HTML code

      $(document).ready(function() {

            var divObj = $("#divShow");
            var txtObj = $("#txtSelect");
            //点击文本框事件
            $("#txtSelect").bind("click", function() {
                //如果divObj已经展开则返回
                if (divObj.is(":visible")) {
                    return;
                }
                //如果未展开,则显示
                //获取txt的坐标
                var txtOffset = $(this).offset();
                var left = txtOffset.left;
                var top = txtOffset.top + $(this).outerHeight();
                //将div移动到txt的下方
                divObj.offset({ left: left, top: top });
                divObj.show();
            });
 });


<input type="text" class="MultiSelectorInput" id="txtSelect" />
    <div id="divShow" style="border-style: solid; border-color: Red; width: 100px; height: 100px;
        display: none; position: absolute">
        123
        <input type="button" id="btnClose" value="close"  />
    </div>



------解决方案--------------------
divObj.css({ left: left, top: top });
试试