jQuery - 使 float 元素粘在另一个元素上

Question

我正在使用 this jQuery 表单验证插件。它在一个小的 float div 中显示字段错误，这很棒。

当显示错误 div，然后它对应的元素移出其原始位置时，就会出现问题。例如，如果在输入框上方我 .show() 一个先前隐藏的元素，它会将输入向下推，但该输入的错误提示将保留在原位。

如何让 float 的 div 粘附/跟随它的相应元素？

这个插件的代码是here例子是 here .

Answer 1

插件对错误消息使用绝对定位。

如果您要添加其他 DOM 元素来移动输入字段相对于文档的位置，那么您将需要在修改 DOM 的脚本运行后手动重新定位所有验证

。

您可以尝试使用 jQuery offset() 方法 http://api.jquery.com/offset/获取输入元素相对于文档的新位置，然后相应地调整验证

的 top 和 left 属性。

这是一个 .jsFiddle 向您展示了我的意思:http://jsfiddle.net/ysQCf/2/

CSS

.errorMessage
{
    background-color: red; 
    position: absolute;
    left: 180px;
    top: 25px;
}

p
{
    display: none;   
}

html

<p id="hidden">if you display this the textbox will move down</p>
<input id="myInput" type="text" />
<div class="errorMessage">stick me to the div</div>
<br />
<input id="show" type="button" value="Show" />

JavaScript

$(function () {
    $("#show").click(function () {
        // Save the offset of the error against the input
        var offset = $(".errorMessage").offset();
        offset.left -= $("#myInput").offset().left;
        offset.top -= $("#myInput").offset().top;

        // Call your script to manipulate the DOM
        $("#hidden").show(); 

        // Move the error div to it's new position
        offset.left += $("#myInput").offset().left;
        offset.top += $("#myInput").offset().top;
        $(".errorMessage").offset(offset)
    });
});

关于jQuery - 使 float 元素粘在另一个元素上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7667785/

上一篇：css - css溢出的透明图像掩码

下一篇：CSS 样式有时仅在 jsf 页面上的页面刷新后应用？