开发者社区> 问答> 正文

jquery offset 问题

$('.talk').on('click', function (e) {
        var $this = $("div#report");
        console.log($this.offset());
        var x = $this.offset();
        if ($this.is(":hidden")) {
            $this.css({left: x.left, top: x.top}).fadeIn();
            return false;
        }
        $this.fadeOut();
        return false;
    });

需求是 让 #report 的div 出现在 class 为 talk 附近

console.log($this.offset()); 打印结果

Object {top: 800, left: 0}

class 为 talk 的元素 在页面最右边 靠近滚动条,为毛 这个left 是0

怎样让#report 定位在 talk 附近

展开
收起
a123456678 2016-07-11 17:27:58 1999 0
1 条回答
写回答
取消 提交回答
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>jQuery</title>
            <style>
            .talk{
                position:   absolute;
                right:      10px;
                top:        10px;
            }
            .hide{
                display:    none;
            }
            </style>
            <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
            <script type="text/javascript">
                $(function(){
                    $('.talk').on('click', function (e) {
                        var report = $("div#report");
                        var offset = $(this).offset();
                        if (report.is(":hidden")) {
                            report
                            .css({
                                'left': offset.left, 
                                'top': offset.top +report.height() ,
                                'position':'absolute'
                            })
                            .fadeIn();
                            return false;
                        }
                        report.fadeOut();
                    });
                });
            </script>
        </head>
        <body>
        <div class="talk"><button>talk</button></div>
        <div id="report" class="hide"><button>talk1</button></div>
        </body>
    </html>
    2019-07-17 19:54:27
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载