带有显示 :none 的 div 中的 jQuery 轮播

Question

我必须在我的网站上使用一个 jQuery 响应式旋转木马，其中有 4 个显示元素，一次滑动一个，等等。要点是:这个旋转木马被放置在一个 div 中，display:none并且它似乎单击带有 slideToggle 脚本 (jQuery) 的按钮。好吧，当 div 出现时，轮播不显示。没有什么!请注意，如果我删除 display:none 轮播显示完美。我已经尝试了一堆轮播插件(bxslider、caroufredsel、elastislide、flexslider)，这个问题发生在所有这些插件上。然后……我快疯了!!

不好意思 friend 们，这里是代码:

HTML(此处是 FlexSlider 的情况，但其他插件的代码类似)

<div id="hiddenDiv">
  <div id="hiddenDivInner">
    <div class="flexslider">
      <ul class="slides">
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
</div>

CSS

#hiddenDiv{
    display:none;
    padding-bottom:10px;
    background: url("../img/xxx.gif") repeat left bottom #FFFFFF;
}

SCRIPT(从站点复制粘贴。此脚本位于 $(document).ready 与其他脚本之间。Alredy 试图删除 load 功能)

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 300,
    itemMargin: 5,
    minItems: 1,
    maxItems: 4
  });
});


$("#trigger").click(function () {
    $("#hiddenDiv").slideToggle(400, "easeInOutExpo");
});

我提醒您，使用这段代码和 no display:none 每个轮播都可以工作，如果我使用 slideToggle 按钮(#trigger)上下滑动 div ).

Answer 1

通过将 div 放在视口(viewport)之外来“隐藏”div

#hiddenDiv {
    position:absolute;
    top: -3000px;
}

脚本将能够初始化，因为 div 没有隐藏，但它不会可见。

您可以在您的 onload 或触发器 onclick 中将 display 设置为 none 并将 position 设置为 relative

编辑 绝对定位从文档流中删除元素，因此它的行为类似于 display:none。