引导程序的“崩溃”组件与同位素过滤器冲突

时间：2019-07-10 10:50:16

标签： bootstrap-4 jquery-isotope isotope

我有一个网站页面，我在其中使用引导程序来布局网格和同位素，因为我需要过滤我的内容（按年等）。

我正在使用引导程序的“折叠”组件，并且当我仍然不单击使用同位素过滤我的内容的任何按钮时，我可以正确地看到由于折叠而隐藏的信息，然后出现（请，请参阅图片1 image1- its ok，图片2 image2- its ok，图片3 image3- its ok和图片4 image4 - click to apply filter），当信息出现时，上方的内容会随着位置的变化而改变位置（高度）应该做的。

但是，当我单击按钮并被同位素过滤时，网格会改变内容-不遵守高度的布局（请参见图5 image 5 - layout grid its not ok after filter applied）-当我单击以查看折叠组件隐藏的内容时通过引导内容重叠（请参见图片6 image 6 - content overlapped）。

我已经在github上以及网站上的堆栈溢出处进行了搜索，特别是尝试使用mansory列（https://isotope.metafizzy.co/v1/custom-layout-modes/masonry-column-shift.html），但是它没有按预期运行。

如果有人可以帮助我，我将非常感激。

在这里，我有一个简单的代码来说明问题： codepen.io/sofiarf/pen/VJRrRb

1 个答案:

答案 0 :(得分：0)

任何DOM更改后，您都需要更新同位素布局。

由于您正在使用Bootstrap 4来处理内容的折叠，因此Isotope无法识别这些更改。因此，在完成所有这些更改之后，您需要调用同位素布局函数。

Bootstrap 4在隐藏和显示内容后触发一个事件。在这些事件中添加侦听器可以解决此问题：

$('.collapse').on('shown.bs.collapse hidden.bs.collapse', function(){
   $('.grid').isotope('layout');
});

我已经用答案更新了您的CodePen。

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 100
  }
});

var $collapse = $('.collapse');
var $container = $('#container');

$(".filter-colunaesquerda").click(function(e) {
  e.preventDefault();
  $grid.isotope({
    filter: '.colunaesquerda'
  });
});

$(".filter-colunadireita").click(function(e) {
  e.preventDefault();
  $grid.isotope({
    filter: '.colunadireita'
  });
});

$(".filter-all").click(function(e) {
  e.preventDefault();
  $grid.isotope({
    filter: '*'
  });
});

$collapse.on('shown.bs.collapse hidden.bs.collapse', function() {
  $grid.isotope('layout');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<div class="container">

  <a href="" class="m-5 filter-colunaesquerda">Coluna esquerda</a>
  <a href="" class="m-5 filter-colunadireita">Coluna direita</a>
  <a href="" class="m-5 filter-all">Todos</a>

  <div class="row">
    <div class="col-6 mb-5">


      <div class="grid">
        <div class="grid-item colunaesquerda">
          <div class="collapse" id="collapseExample1">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
          <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quas, tempore alias libero minima inventore esse quam aperiam autem molestiae dolores quaerat delectus at ducimus dolorum provident quis porro placeat? </p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button></div>
      </div>
    </div>
    <div class="col-6 mb-5">


      <div class="grid">
        <div class="grid-item colunadireita">
          <div class="collapse" id="collapseExample2">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
          <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quas, tempore alias libero minima inventore esse quam aperiam autem molestiae dolores quaerat delectus at ducimus dolorum provident quis porro placeat? </p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button></div>
      </div>
    </div>


    <div class="col-6 mb-5">


      <div class="grid">
        <div class="grid-item colunaesquerda">
          <div class="collapse" id="collapseExample3">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
          <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quas, tempore alias libero minima inventore esse quam aperiam autem molestiae dolores quaerat delectus at ducimus dolorum provident quis porro placeat? </p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button></div>
      </div>
    </div>
    <div class="col-6 mb-5">


      <div class="grid">
        <div class="grid-item colunadireita">
          <div class="collapse" id="collapseExample4">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
          <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum quas, tempore alias libero minima inventore esse quam aperiam autem molestiae dolores quaerat delectus at ducimus dolorum provident quis porro placeat? </p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button></div>
      </div>
    </div>


  </div>
</div>





<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>



<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

相关问题
最新问题