jquery.flipster隐藏时不显示，并显示2个旋转木马

Question

我正在尝试使用jquery.flipster：https://github.com/drien/jquery-flipster将2条流苏合并到我的web应用程序中。

然而，我一次只想展示一个旋转木马。当我点击一个标签来隐藏第一个，并显示第二个，第二个没有出现。检查火狐中的元素，我可以看到<ul>在class="flipster"下面没有给hide/ Firefox的高度或宽度：

HTML：

<div class="carousel-1">
    <h2>Carousel 1</h2>
    <div class="flipster">
      <ul>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
      </ul>
    </div>
  </div>


  <p class="show-carousel-2">Click Me to toggle both carousels</p>


  <div class="carousel-2">
    <h2>Carousel 2</h2>
    <div class="flipster">
      <ul>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
      </ul>
    </div>
  </div>

剧本：

<script>
    $(function() {
      $(".flipster").flipster({
        style: 'carousel',
        enableNav: false,
        enableNavButtons: true,
        start: 0
      });
    });

    $(document).ready(function(){

      $(".carousel-2").hide();

      $( ".show-carousel-2" ).click(function() {
        $( ".carousel-1" ).toggle( "slow" );
        $( ".carousel-2" ).toggle( "slow" );
      });

    });
  </script>

柱塞：http://plnkr.co/edit/mqclzHJ1lLZCgr4j23AR?p=preview

我甚至试过通过以下方式来施加高度和宽度：

$( ".js-inject-carousel-css" ).css({"height": "176px !important", "width": "140px !important"});

将class js-inject-carousel-css添加到<ul>时

还是没有运气

Answer 1

我发现了这个问题并解决了这个问题。

而不是：

$( ".js-inject-carousel-css" ).css({"height": "176px !important", "width": "140px !important"});

我用：

$( ".js-inject-carousel-css" ).css({"height": "176px", "width": "140px"});

本质上，我删除了!important。这是停止jQuery插入CSS值。