Question

我正在尝试使用可点击的div，以便在单击时将其附加到单击的div的底部。我有它，所以当我点击它出现在鼠标的位置，但我希望它在点击的div正下方，并且正对着底部边框。

我尝试使用$（div）.position.left（）;但它没有把它放在正确的位置，并在你调整屏幕大小时改变了。

关于如何做我正在寻找的事情的任何想法？

谢谢，

克雷格

以下是代码

$('#clickDetails').click(function(e) {
$('#dcHover')
.css('position', 'absolute')
.css('top', e.pageY + 10)
.css('left', e.pageX - 8)
.css('z-index','2')
.toggle();
//$('#clickDetails').append('<div id="dchover">test</div>');
});

这是div标签

<div id="clickDetails" style=" width: 10px; background-color:red; padding: 1px 5px 1px 5px; color: white; -moz-border-radius:5px; margin-top:-80px; margin-right:35px; z-index: -1;">!</div>

Answer 1

尝试在Jquery

中使用.after（）函数

HTML：

<div id="div1" class="d">Click Me</div>
<div id="div3" class="d">Click Me</div>

的Javascript

$(".d").click(function(){
    $(this).after("<div id='div2'>Appended</div>");
});

工作示例：http://jsfiddle.net/PeepD/1/

Answer 2

您在添加元素之前应用CSS样式，因此它们未被添加到dchover

尝试重新排列代码：

$('#clickDetails').click(function(e) {
$('#clickDetails').append('<div id="dchover">test</div>');
$('#dchover')
.css('position', 'absolute')
.css('top', e.pageY + 10)
.css('left', e.pageX - 8)
.css('z-index','2')
});

Answer 3

听起来你真的想在当前div之后附加一个新的div。

为此，请使用jQuery after方法。

$(function(){

    // handle the click event of the div with id 'clickme'
    $("#clickme").click(function(){

        // this is now the div that has been clicked
        $(this).after("<div class='added'>testing</div>");

    });

});

然后根据需要使用CSS来减少或增加div之间的差距。

在这里查看：

http://jsfiddle.net/Ajbyt/3/

将弹出窗口附加到div的底部

3 个答案: