显示:无不能正常工作

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内联-出于维护和性能原因，最好将它们放在外部文件中。

这是一个有效的。

顺便说一句，我在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对象不会有这些大小。

编辑：既然你正在使用插件，我仍然等待我的可见性:隐藏的解决方案。看起来你没有链接你的插件以供参考，但我猜它是弹性幻灯片-响应-旋转木马。

看一下这个插件的源代码，它看起来像是在第340行调用图像上的outerWidth和outerHeight来存储它们，以供以后在插件中使用。

问题是它存储的是0。我已经修改了之前发布的jsfiddle，在这里显示了这一点。

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

按照其他人的建议，不使用内联，而是尝试以下代码

CSS

.fixed-bar { visibility: hidden }