0

我有一个画廊，只有当用户点击按钮时才会打开。所以我添加了代码 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>
4

2 回答 2

3

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

这是一个有效的jsFiddle。

顺便说一句，我ui-btn-right在 jQuery 和 CSS 中使用了该特定链接的类 ' ' 作为选择器 - 您可能应该为该特定链接提供一个 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;
}
于 2013-04-08T17:30:13.863 回答
0

如果您正在使用某种 javascript 库来执行轮播效果。您可能需要改为使用style="visibility: hidden"。脚本可能会在开始时计算大小，而display:none对象不会有这些大小。

编辑：由于您使用的是插件，我仍然等待我的可见性：隐藏解决方案。看起来您没有链接您的插件以供参考，但我猜它是 elastislide-responsive-carousel。

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

问题是它存储了 0。我已经修改了之前发布的 jsfiddle 以在此处显示。

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

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

CSS

.fixed-bar { visibility: hidden }

于 2013-04-08T17:31:33.897 回答