javascript - 隐藏和显示 2 个轮播时 jquery.flipster 不显示

Question

我正在尝试使用 jquery.flipster 将 2 个轮播合并到我的 Web 应用程序中:https://github.com/drien/jquery-flipster

但是，我每次都只是尝试一次显示一个旋转木马。当我单击标签以隐藏第一个并显示第二个时，第二个没有出现。检查 Firefox 中的元素，我可以看到 <ul>在 class="flipster" 下面在隐藏/显示时没有给出高度或宽度:

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 值。