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 回答