javascript - 一个链接中的 jQuery 定位错误

Question

我一直在尝试使用 jQuery 创建一个菜单面板，可以通过单击顶部的预览 按钮在此处看到它:

$(function(){
  // hide all panels first
  $('div[id*="panel"]').hide();
  
  // make the panels absolute positioned
  $('div[id*="panel"]').css('position', 'absolute');
  
  // show the panel based on rel attribute of the current hovered link
  $('#menu a').hover(function(){
    var link_rel = $(this).attr('rel');

    //get the position of the hovered element
    var pos = $(this).offset();
    
    // set z-index of previous panels low
    $('div[id*="panel"]').css('z-index', '0');
    
    // get the panel near by hovered element now
    $('div#' + link_rel).css({
      'left': pos.left + 'px',
      'top': pos.top + 'px',
      'zIndex': '5000'
    });
    
    // finaly show the relevant hidden panel
    $('div#' + link_rel).fadeIn('slow');

    // hide it back when mouse arrow moves away
    $('div#' + link_rel).hover(function(){}, function(){
      $(this).fadeOut('slow');
    });

  }, function(){});
  
});

http://jsbin.com/amexi/edit

如果您将鼠标悬停在链接二或链接三上，黑色面板会完美地替换相应的蓝色链接，但是如果您将鼠标悬停在链接一，黑色面板几乎不在该链接下方。这里出了什么问题？我该如何解决这个问题？

Answer 1

您需要考虑自动应用于 <ul> 的 margin 元素。

如果您使用 Firebug 查看您的页面，您会注意到 Firefox 应用了 16 像素的顶部和底部边距。