我想实现一个简单的效果 就是点击文本框 div就出现在这个文本框下面 ,但下面的代码每次点击,这个div的left 跟top会累计,求帮助,问题出现在哪里?
$(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>
$(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>
试试