0

作品の一部を表示し、それを展開すると残りの部分を表示するポートフォリオのスライダーに取り組んでいます。ここでプレビューを見ることができます: http://staging.pautlerdesign.com/portfolio/index.php . 目的の効果を得るために次のコードを使用しています。

  if ($(window).width()>768) {
    var sliderHeight = "180px";
    $('.slider').each(function () {
      var current = $(this);
      var height = $(current).height();
      current.attr("box_h", height);
    });

    $('.slider').css("height", sliderHeight);
    $(".slider_menu").html('<a href="javascript:void(0);" class="expand"><i class="ss-plus"></i></a>');
    $(".slider_menu a").click(function() {
      openSlider($(this).parent().prev("ul.slider"), $(this).parent());
      return false;
    });
  }

  function openSlider(obj, slideMenu) {
      var open_height = $(obj).attr("box_h") + "px";
      $(obj).animate({
          "height": open_height
      }, {
          duration: "slow"
      });
      $(slideMenu).html('<a href="javascript:void(0);" class="expand"><i class="ss-hyphen"></i></a>');
      $(slideMenu).children("a").click(function() {
          closeSlider(obj, slideMenu);
      });
      return false;
  }

  function closeSlider(obj, slideMenu) {
      $(obj).animate({
          "height": sliderHeight
      }, {
          duration: "slow"
      });
      $(slideMenu).html('<a href="javascript:void(0);" class="expand"><i class="ss-plus"></i></a>');
      $(slideMenu).children("a").click(function() {
          openSlider(obj, slideMenu);
      });
      return false;
  }

何らかの理由で、「box_h」を ul に割り当てるときの上部の部分が正しく機能していません。最初のいくつかの項目ではうまく機能していますが、下に行くにつれて、22、44、または 66 の高さを適用しています。その他。何か案は？私はそれが非常に些細なことだと思いますが、私の人生ではそれを理解することはできません.

4

1 に答える 1

1

コードを次のようにラップする必要があるようです。

$(window).load( function() {
  //...
})

それ以外の：

$( function() {
  //...
});

そのため、ページ上の DOMと画像が読み込まれるまでコードの実行が遅れます。現在、リストした Javascript のブロックは、DOM のみがロードされることが保証されているときに実行されています。画像がまだロードされておらず、ボックスが展開されていない可能性があるため、ページの後半のアイテムの高さが不正確になります。

于 2012-11-04T01:31:27.860 に答える