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和其他脚本之间.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");
});

我提醒您，使用此代码并且没有 display:none每个轮播都可以正常工作，如果我使用slideToggle按钮（#trigger）向上滑动然后向下滑动div。

Answer 1

使用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 2

将div放在视口之外“隐藏”div

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

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

您可以在onload或触发器中单击

将显示设置为无，并将位置设置为相对

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

Answer 3

这是我的修复！我认为这是正确的！

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

带有display：none的div中的jQuery轮播

3 个答案: