Question

使用Isotope对某些信息进行排序和过滤。需要最初只显示每个列表项的标题，然后展开它以显示单击的详细信息。这些操作中的每一个都在技术上有效（同位素正在排序/过滤，点击标题div导致细节div显示），但它们不会很好。同位素应用的绝对定位阻止了其他列表项在任何细节div显示时进行适当调整。

我已经看到一些帖子讨论重新调整动画中的项目，但它们都有扩展元素的设定高度，在我的情况下，高度将基于内容而不等。

示例CODEPEN：http://codepen.io/stacybirdy/pen/emPwxj

因此，当点击其中一个项目时，它下面的所有项目都应该向下移动以容纳额外的内容，而不是让它在其他项目后面展开。这可能吗？

$('.exp-head').click(function() {
  $(this).parent().find('.exp-body').slideToggle();
  $(this).toggleClass('open closed');
});

<div class="exp-wrap composition chamber">
  <div class="exp-head closed">Piece #1 (chamber)</div>
  <div class="exp-body">
    <span class="duration">4' 50"</span>
    <span class="date">2014</span>
    other information will go here
  </div>
</div>

Answer 1

这是另一种不使用slideToggle的方法。

codepen

$('.exp-head').click(function() {
$(this).toggleClass('open closed');
});

   var $items = $('.composition');
   $items.on( 'click', function () {
    var $this = $(this).closest('.composition');   
    // don't proceed if already selected
    var $previousSelected = $('.expand');
    if (!$this.hasClass('expand')) {
        $this.addClass('expand');

    }
       $previousSelected.removeClass('expand');

   $('.isotope').isotope('layout');
  });

和CSS的这一点：

.composition.expand {
 height: 80px;
 }
 .composition.expand .exp-body{display:block;}

Answer 2

滑动切换

后，需要使用isotope重新编译元素

$('.exp-head').click(function() {
  $(this).parent().find('.exp-body').slideToggle(function() {
    $('.isotope').isotope("layout");
  });
  $(this).addClass('open');
});

http://codepen.io/anon/pen/MYzbVK

你也使用了同位素β，use the latest。

用同位素点击展开元素

2 个答案: