Question

我尝试使用css和jquery构建一个简单的注释视图，在每行的末尾，“回复”链接应弹出一个小方框以填充注释。为此，我使用最初隐藏的div，然后使用jquery显示div，并将其相对于调用它们的链接定位。

这样可以正常工作，只要浏览器处于这样的滚动位置，整个表单就可以看到。但是，如果没有足够的空间，表单将显示在其他地方，适合它。当我在css中使用position：relative时，这甚至是正确的：现在，在回复按钮下面，将为表单提供足够的空白区域，但如果没有，表单仍将显示在顶部而不是按钮下方足够的空间。

这是我的代码：

CSS：

#mycomments_list .comment { margin-left: 50px; }
#mycomments_list .form {
display: none;
position: absolute;
background: #248;
padding: .5em 1em .5em 1em;
border-radius: .5em;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
box-shadow: #000 1px 1px 5px;
-moz-box-shadow: #000 1px 1px 5px;
-webkit-box-shadow: #000 1px 1px 5px;
white-space: nowrap;
}

Jquery的：

function setCommentFormVisible(id) {
    var item = $("#comment_form_" + id);
    var connector = $(".comment_click#" + id);
    if (!(item.is(":visible"))) {
        item.show();
        item.css({left:0,top:0});
        item.position({
            my: "left top",
            at: "center bottom",
            of: connector });
        connector.addClass("active");
    } else {
        item.hide();
        connector.removeClass("active");
    }
}

HTML（摘录）

<div class="comment">
    <div id="1">

    mike --- This is the first comment.. -- 
    <a href="#" class="comment_click" id="1_1">Reply</a> 

    <div class="form" id="comment_form_1_1"> 
        .. form here
    </div>

    </div>

...
</div>

我有一种模糊的感觉，这种行为可能是故意的，但是位置相对很奇怪：相对会创造所需的空间但是却没有填充它？

我非常感谢您对我可能遗失或做错的任何指示！

谢谢， QZ

Answer 1

jQuery UI positioning utility也有一个碰撞参数。尝试在代码中将其设置为none：

function setCommentFormVisible(id) {
    var item = $("#comment_form_" + id);
    var connector = $(".comment_click#" + id);
    if (!(item.is(":visible"))) {
        item.show();
        item.css({left:0,top:0});
        item.position({
            my: "left top",
            at: "center bottom",
            of: connector,
            collision: 'none none' });
        connector.addClass("active");
    } else {
        item.hide();
        connector.removeClass("active");
    }
}

Jquery / CSS：无论浏览器滚动位置如何，强制我/ at / of位置？

1 个答案: