显示的div中的jQuery旋转木马:无
我必须在我的网站上使用一个jQuery响应旋转木马，它有4个显示的项目，每次滑动一个，等等。重点是:这个旋转木马被放置在一个带有display:none的div中，它显示在一个带有slideToggle脚本(jQuery)的按钮上。当div出现时，旋转木马不会显示。没什么!注意，如果我移除display:none，旋转木马就会显示得很完美。我已经尝试了一堆旋转木马插件( of滑块，旋转木马，弹性滑块，挠性滑块)，这个问题会发生在所有这些人身上。然后..。我要疯了！！
不好意思，meSorry朋友们，这是代码：
(这里是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;
}脚本(从站点复制粘贴)。此脚本介于$(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");
});我提醒您，使用这段代码和no display:none，每个传送带都可以工作，如果我使用slideToggle按钮(#触发器)上下滑动div的话。
回答 3
Stack Overflow用户
发布于 2012-12-07 19:39:46
与其使用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;
}Stack Overflow用户
发布于 2012-12-07 22:52:20
“隐藏”div，将其放置在视口之外。
#hiddenDiv {
position:absolute;
top: -3000px;
}脚本将能够初始化，因为div不是隐藏的，但它是不可见的。
您可以将显示设置为“无”，并将“位置”设置为“onload”或“单击触发器”中的相对位置。
编辑绝对定位将元素从文档流中移除，因此它将表现为显示:无。
Stack Overflow用户
发布于 2013-08-04 15:53:38
这是我的办法！我认为这是正确的！
.hidden{
visibility: hidden;
position: absolute;
width: 300px;
overflow: hidden;
}https://stackoverflow.com/questions/13768254
复制相似问题
腾讯云开发者
