javascript - BX slider 可通过“阅读更多”按钮调整自适应高度

Question

我正在使用 bx-slider。我的任务是为其中一张幻灯片添加一个“阅读更多”按钮，这应该会扩大幻灯片的高度。问题是当我运行 readmore.js 函数时，BX slider 不会重新计算高度。有没有办法在我从不同的插件中单击“阅读更多”功能的同时调用自适应高度功能？

谢谢

$(document).ready(function() {
  $('.bxslider').bxSlider({

    adaptiveHeight: true,
    pagerCustom: '#bx-pager'

  });
});


$('.readmore').readmore();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>



<ul class="bxslider">

  <li>
    <div class="readmore">
      
    <h3>Slide with "Read More" Button. </h3>  
      <p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not adjust.</p>

      <p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
    </div>

  </li>

  <li>
<h3>Other Slide</h3>
    <p>
      Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
      pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
      dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
    </p>
  </li>
</ul>

Answer 1

使用

bxSlider API - onSliderResize回调

<小时/>

了解更多 API - afterToggle回调

bxSlider 可能会对间接调整其尺寸大小的事件无响应。您可以通过直接调整 .bx-viewport 的大小来“唤醒”它。

  function bxAdjust(idx) {
     $('.bx-viewport').height("0").height('100%');
  }

使用这个简单的函数作为 onSliderResize 和 afterToggle 的回调。下面是工作片段。

片段

$(document).ready(function() {
  var bx = $('.bxslider').bxSlider({
    adaptiveHeight: true,
    pagerCustom: '#bx-pager',
    onSliderResize: bxAdjust
  });
});

function bxAdjust(idx) {
  $('.bx-viewport').height("0").height('100%');
}
$('.readmore').readmore({
  afterToggle: rmAdjust
});

function rmAdjust(tgr, ele, exp) {
  bxAdjust();
  if (exp) {
    tgr = 'Close';
  } else {
    tgr = 'Read More';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>



<ul class="bxslider">

  <li>
    <div class="readmore">
      <h3>Slide with "Read More" Button. </h3> 
      <p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not
        adjust.
      </p>

      <p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem
        vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis,
        neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur
        nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
    </div>

  </li>

  <li>
    <h3>Other Slide</h3>
    <p>
      Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
      pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
      dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
    </p>
  </li>
</ul>