jquery - jQuery 弹出窗口未显示在所需位置

Question

我有一个文本框和一个隐藏的 div，它们将显示为弹出窗口。我希望当用户单击文本框时，隐藏的 div 弹出窗口将显示在文本框的位置。所以，我使用代码：

var p = $("#listCats");
var position = p.offset();
$('#category').css({"left" : position.left, "top" : position.top});

listCats : 文本框的 id

category : 隐藏的div的id，也是css

#category {
        width: 508px;
        min-height: 135px;
        padding: 0.4em;
        position: absolute;
        border: 2px solid rgb(124, 113, 113);
        background: #fff
}

但是，隐藏的 div 弹出窗口没有按我的预期显示，而是：

我做错了什么吗？

编辑：完整的隐藏div如下：

<div id="category" style="display:none;">
        <s:iterator value="categoryMapList">
            <div class="cat_label_title parentCat" id="<s:property value="key.id" />">
                <s:property value="key.name" />
                <div class="subCat">
                    <s:iterator value="value" var="category">
                        <label >
                            <a  href="#" class="cat_label_item catItem" name="catItem:<s:property value="key.name" />, <s:property value="#category.name" />"
                                id="catItem:<s:property value="#category.id" />">
                                <s:property value="#category.name" />
                            </a>
                        </label>
                    </s:iterator>
                </div>
            </div>
        </s:iterator>
    </div>

Answer 1

您可能想检查类别容器是否绝对定位在另一个具有相对定位的 div 中。

这意味着顶部，左侧是相对于父级的。

因此，通过获取父级的页面偏移量，然后将其设置为子级，您会将其推离父级而不是下方。

也检查一下：https ://stackoverflow.com/a/3202038/1060487

Answer 2

jquery.css 需要一个以 px 结尾的字符串。在你的情况下：

$('#category').css({"left" : position.left + 'px', "top" : position.top + 'px'});

Answer 3

HTML：

<input type="text" name="txt" id="listCats">

<div id="category"><p>Hello</p></div>

CSS：

#category {
  width: 508px;
  min-height: 135px;
  padding: 0.4em;
  position: absolute;
  border: 2px solid rgb(124, 113, 113);
  background: #fff;
  display: none;
}

jQuery：

var $inp = $("#listCats"),
$msg = $("#category"),
pos = $inp.offset();

$inp.bind("click", function () {
  $msg.css({
    "left": pos.left,
    "top": pos.top + $inp.height()
  }).show();
});

工作小提琴：http: //jsfiddle.net/darshanags/MEgrp/12/