0

我必须在我的网站上使用一个 jQuery 响应式轮播，其中包含 4 个显示的项目，一次滑动一个，等等。关键是：这个轮播被放置在一个 div 中display:none，它出现在单击带有 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。

4

3 回答 3

0

而不是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;
}
于 2012-12-07T19:39:46.097 回答
0

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

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

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

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

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

于 2012-12-07T22:52:20.733 回答
0

这是我的修复！我觉得是对的！

.hidden{
  visibility: hidden;
  position: absolute;
  width: 300px;
  overflow: hidden;
}
于 2013-08-04T15:53:38.633 回答