Question

我有一个只在用户点击按钮时打开的图库。所以我添加了代码display：none，因为我不希望在开始时显示库。但是，当我点击按钮时，只打开背景，图像不显示。

知道这是什么问题吗？

<a onClick="$('.fixed-bar').toggle('slow');" data-icon="grid" data-iconpos="notext" data-inline="true" class="ui-btn-right" data-direction="reverse" style="margin-right:70px">Paginas</a>

<div class="container demo-3">
    <div class="main">
        <div class="fixed-bar" style="display:none">
            <ul id="carousel" class="elastislide-list">
                <li><a href="#"><img src="elastislide/small/1.jpg" alt="image01" /></a></li>
                <li><a href="#"><img src="elastislide/small/2.jpg" alt="image02" /></a></li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    $( '#carousel' ).elastislide( {
        minItems : 2
    } );
</script>

Answer 1

有点偏离主题，但通常最好不要像这样编写你的jQuery / CSS内容 - 出于维护和性能原因，最好将它们放在外部文件中。

这是一个有效的 jsFiddle 。

顺便说一句，我在jQuery和CSS中使用了特定链接的类'ui-btn-right'作为选择器 - 您应该为该特定链接提供一个ID或其他东西作为它的选择器，除非那是只有你计划使用该课程。

<强> jQuery的：

$('.ui-btn-right').on('click', function(){
  $('.fixed-bar').toggle('slow');
});

<强> HTML：

<a data-icon="grid" data-iconpos="notext" data-inline="true" class="ui-btn-right" data-direction="reverse">Paginas</a>   
<div class="container demo-3">
   <div class="main">
     <div class="fixed-bar">   
       <ul id="carousel" class="elastislide-list">
         <li><a href="#"><img src="elastislide/small/1.jpg" alt="image01" /></a></li>
         <li><a href="#"><img src="elastislide/small/2.jpg" alt="image02" /></a></li>
       </ul>
     </div>
   </div>
</div>

<强> CSS：

.ui-btn-right {
  margin-right:70px;      
}

.fixed-bar {
    display:none;
}

Answer 2

如果您使用某种javascript库来制作旋转木马效果。您可能需要使用style="visibility: hidden"代替。该脚本可能正在计算开头的大小，display:none对象不具有这些大小。

修改：由于您使用的是插件，我仍然可以看到我的可见性：隐藏的解决方案。它看起来并不像你的插件链接参考，但我猜它是弹性滑动响应式旋转木马。

查看此插件的来源，它看起来像是在图像上调用outerWidth和outerHeight来存储它们，以便稍后在第340行的插件中使用。

问题在于它存储了0.我修改了之前发布的jsfiddle来显示这里。

http://jsfiddle.net/Z6DhF/1/

正如其他人建议的那样，不要使用内联，请尝试使用此代码

<强> CSS

.fixed-bar { visibility: hidden }

display：none无法正常工作

2 个答案: