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 {
  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 に答える