0

请参阅 CODEPEN 以了解清楚：http: //codepen.io/geochanto/pen/LGNWML

var maxHeight = 0;

$('li a').each(function() {
    maxHeight = maxHeight > $(this).outerHeight() ? maxHeight : $(this).outerHeight();
    var linkHeight = $(this).outerHeight();
    var halfLinkHeight = parseInt(linkHeight / -2);
    $(this).  css({
   'margin-top' : halfLinkHeight,
   'height' : maxHeight
    });  
});

$("li").css("height", maxHeight);

所以我有这段代码来计算链接的高度，然后将它们全部设为最高链接的高度，并在顶部添加一些负边距，以便在它们各自的父项中垂直居中对齐它们。一切都按我的意愿工作，除了，我一直试图让这个高度重新计算并使用各种方法应用于<li>窗口<a>调整大小，但没有一个奏效。

我已经尝试过这些，但也许我的语法是错误的，idk：

  1. 如何创建一个 jQuery 函数（一个新的 jQuery 方法或插件）？
  2. 在窗口事件上运行 Jquery 函数：加载、调整大小和滚动？
  3. 如何在窗口调整大小时调用jQuery中的函数？
4

1 回答 1

1

我在这里为你工作：http: //codepen.io/anon/pen/RraVZE

它对您的 css 和 javascript 进行了一些更改。

我从您的 a 标签中删除了绝对定位：

a {
  display: block;
  padding: 10px;
  margin-left: 50px;
  font-size: 16px;
  line-height: 1.2;
  font-family: "montserrat", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  color: #193170;
  text-decoration: none;
  word-wrap: break-word;
}

并修改了你的 JavaScript：

$(document).ready(function() {

  var maxHeight = 0;

  function calculateHeight() {
    $('li a').each(function() {
      maxHeight = maxHeight > $(this).outerHeight() ? maxHeight : $(this).outerHeight();
    });
    $("li").css("height", maxHeight);
    centerText();
  }

  function centerText() {
    $('li a').each(function() {
      var linkHeight = $(this).outerHeight();
      var halfLinkHeight = parseInt((maxHeight - linkHeight) / 2);
      $(this).css('margin-top', halfLinkHeight);
    });
  }

  $(window).resize(function() {
    calculateHeight();
  });

  calculateHeight();

});
于 2015-12-18T03:42:56.437 回答