如何在bootstrap手风琴内重建猫头鹰旋转木马？

I have a bootstrap accordion on my webpage, with 2 panels. One of which is open by default and other one is collapsed. Each of these panels have owl carousel in it. Owl carousel in first panel is working correctly, but when i open collapsed accordion panel then owl carousel in that panel is not properly shown.

我的网页上有一个bootstrap手风琴,有两个面板。其中一个默认打开,另一个崩溃。这些面板中的每一个都有猫头鹰旋转木马。第一个面板中的猫头鹰旋转木马工作正常,但当我打开折叠的手风琴面板时,该面板中的猫头鹰旋转木马没有正确显示。

Can anybody tell me how to reset/rebuild owl carousel in that collapsed accordion panel, when its opened.

任何人都可以告诉我如何在折叠的手风琴面板中重置/重建猫头鹰旋转木马,当它打开时。

1 个解决方案

#1

 $(document).ready(function(){
  $('.collapsed').click(function() {
       $(this).next('.owl-carousel').trigger('refresh.owl.carousel');
        $(this).next('.owl-carousel').owlCarousel({
            responsive:{
                0:{
                    items:1
                }
            }
        });   
  });
    $('.owl-carousel').owlCarousel({
      responsive:{
          0:{
              items:1
          }
      }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
      </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="owl-carousel">
          <div class="item"><h4>1</h4></div>
          <div class="item"><h4>2</h4></div>
          <div class="item"><h4>3</h4></div>
          <div class="item"><h4>4</h4></div>
          <div class="item"><h4>5</h4></div>
          <div class="item"><h4>6</h4></div>
          <div class="item"><h4>7</h4></div>
          <div class="item"><h4>8</h4></div>
          <div class="item"><h4>9</h4></div>
          <div class="item"><h4>10</h4></div>
          <div class="item"><h4>11</h4></div>
          <div class="item"><h4>12</h4></div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Collapsible Group Item #2
      </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        <div class="owl-carousel">
          <div class="item"><h4>1</h4></div>
          <div class="item"><h4>2</h4></div>
          <div class="item"><h4>3</h4></div>
          <div class="item"><h4>4</h4></div>
          <div class="item"><h4>5</h4></div>
          <div class="item"><h4>6</h4></div>
          <div class="item"><h4>7</h4></div>
          <div class="item"><h4>8</h4></div>
          <div class="item"><h4>9</h4></div>
          <div class="item"><h4>10</h4></div>
          <div class="item"><h4>11</h4></div>
          <div class="item"><h4>12</h4></div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Collapsible Group Item #3
      </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        <div class="owl-carousel">
          <div class="item"><h4>1</h4></div>
          <div class="item"><h4>2</h4></div>
          <div class="item"><h4>3</h4></div>
          <div class="item"><h4>4</h4></div>
          <div class="item"><h4>5</h4></div>
          <div class="item"><h4>6</h4></div>
          <div class="item"><h4>7</h4></div>
          <div class="item"><h4>8</h4></div>
          <div class="item"><h4>9</h4></div>
          <div class="item"><h4>10</h4></div>
          <div class="item"><h4>11</h4></div>
          <div class="item"><h4>12</h4></div>
        </div>
      </div>
    </div>
  </div>
</div>