javascript - 在 href 旁边渲染 DIV

Question

如何在 href 链接旁边呈现一个 div，我们使用的是 JQuery。 下面是附加的代码，当单击 div 时，div 会在浏览器选项卡下方呈现，我想在 href 链接旁边呈现，因为网页中会有很多 href 链接使用相同的 div 标签。

我不能在 css 中这样做，因为它固定在那个位置，我对页面中的许多 href 使用相同的 div，但在用户单击链接时动态更改 div 的内容。

附上代码。

任何帮助都会非常有帮助。

谢谢。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
      $(document).ready(function(){

      $('#cluster1').hide();

            $('a').click(function(){

            $('#cluster1').show('slow');

   });

   $('a#close').click(function(){
        $('#cluster1').hide('slow');
        })

      });
</script>

<style>

.heading {
background:none repeat scroll 0 0 #B8CFE6;
color:#333333;
font:bold 12px verdana;
padding:7px;
}

.fr {
float:right;
}

element.style {
display:block;
}
.cluster {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #757893;
display:none;
left:80px;
position:absolute;
text-align:left;
top:0;
width:560px;
z-index:10000;
margin-left:100px;
}

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, td {
margin:0;
padding:0;
}

.content {
background:none repeat scroll 0 0 #FFFFFF;
font:11px verdana;
overflow:auto;
width:560px;
}

.bottom {
border-top:1px solid #C1C8D4;
font:11px verdana;
padding:7px;
text-align:right;
}
.fl {
float:left;
}

.content ul li {
float:left;
padding:5px;
width:170px;
list-style: none;
}
</style>

<div class="cluster" id="cluster1" style="display: block;"><div class="heading">
                    <div class="fr"><p><a href="#" id="close">Close</a></p></div>
                        Update
                </div>
                    <form method="post" action="">

                    </form>
                </div>

                </br></br></br></br></br></br></br></br>
                <a href="#" id="click">Click Here</a>

Answer 1

您可以使用 .position() 获取链接的位置功能。它会给你元素相对于偏移父元素的位置(使用 .offset() 你可以得到它相对于文档)。

然后你可以简单地使用.css()在 div 上定位它。

  $('a').click(function(){
      var linkpos=$(this).position();
      $('#cluster1')
          .css('top', linkpos.top)
          .show('slow');         
  });

jsFiddle Demo