查找光滑滑块容器高度的问题

时间:2018-01-03 06:07:38

标签: javascript jquery css slick.js

尝试获取单击标题框后显示的光滑滑块的容器高度时遇到问题。

我试图捕捉高度并使用该高度将其他标题框向下移动正确的数量,但它会在三个幻灯片压缩成光滑的滑块之前捕捉它们的高度,所以它摆脱了我的布局。我的容器最终高达3倍,因为有3个幻灯片,它将其他标题框推得太远了。

这让我疯了。有什么帮助吗?

https://codepen.io/Finches/pen/vpZqYR

// Show/hide content from clicking box title
$('.track-box-title').click(function() {
  //Get height of content
  var height = $(this).parent('.track-box').parent('.track-box-container').find('.track-content').height() + 250;

  console.log(height);

  //Convert height to string
  var heightStr = height.toString();

  //Toggle height and content box display
  if ($(this).parent('.track-box').parent('.track-box-container').height() == 200) {
      $(this).parent('.track-box').parent('.track-box-container').animate({height: heightStr});
      $(this).parent('.track-box').parent('.track-box-container').find('.track-content').show();
      // initialize slick slider
      $(this).siblings('.track-content').find('.project-image-slider').slick({});
    }
    else if ($(this).parent('.track-box').parent('.track-box-container').height() == height) {
      $(this).parent('.track-box').parent('.track-box-container').find('.track-content').hide();
      $(this).parent('.track-box').parent('.track-box-container').animate({height: "200px"});
      $(this).siblings('.track-content').find('.project-image-slider').hide();
    }

});

$('.close-btn').click(function() {
  $(this).parent('.content').parent('.track-content').hide();
  $(this).parent('.content').parent('.track-content').parent('.track-box').parent('.track-box-container').animate({height: "200px"});
});

1 个答案:

答案 0 :(得分:1)

当光滑滑块正确加载时,该类"光滑初始化"得到补充。

你应该在你的JS选择器中使用它,然后它应该获得正确的高度。