带有显示的 div 中的 jQuery 轮播：无

Question

我必须在我的网站上使用一个 jQuery 响应式轮播，其中包含 4 个显示的项目，一次滑动一个，等等。关键是：这个轮播被放置在一个带有 display:none 的 div 中，并且它似乎点击了一个按钮使用 slideToggle 脚本（jQuery）。好吧，当 div 出现时，轮播不会显示。没有什么！请注意，如果我删除display:none，轮播将完美显示。我尝试了一堆轮播插件（bxslider、caroufredsel、elastislide、flexslider），所有这些都发生了这个问题。然后……我要疯了！！

不好意思朋友，这里是代码：

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 与其他脚本之间。已经尝试删除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");
});

我提醒您，使用此代码和 否 display:none 每个轮播都可以工作，如果我使用 slideToggle 按钮 (#trigger) 向上然后向下滑动 div。

Answer 1

通过将 div 放在视口之外来“隐藏”它

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

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

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

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

Answer 2

不要使用display: none; 来隐藏您的轮播，而是使用visibility: hidden;

然后当你准备好展示它时，使用visibility: visible;

轮播在初始化时需要其容器具有尺寸。使用display: none;时，维度为零，轮播未正确初始化。

另外，display: none; 将元素从流中取出，visibility: hidden; 将元素保留在原位，但隐藏。这样做的好处是，当你让元素出现时，你周围的内容流不会被打断。

见：https://developer.mozilla.org/en-US/docs/CSS/visibility

我看不到您的所有代码/布局，但不妨试试这样的方法。修改以适应您的布局...

#hiddenDiv{
    visibility: hidden;
}


$("#trigger").click(function () {
    $("#hiddenDiv").css('visibility', 'visible');
});

---

编辑：

另一种可能性是仅在构造它之后 隐藏它，而不是在初始 CSS 中隐藏它。

$(document).ready(function() {

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

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

    $("#hiddenDiv").css('display', 'none'); // the very last thing

});

CSS：

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

Answer 3

这是我的解决方案！我觉得是对的！

.hidden{
  visibility: hidden;
  position: absolute;
  width: 300px;
  overflow: hidden;
}