用同位素点击展开元素

Question

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

我看过一些讨论 re-adjusting 动画项目的帖子，但它们都为展开元素设置了高度，在我的例子中，高度将基于内容而不是相等。

示例代码：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

滑动切换后需要用同位素重新排序元素

$('.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。

用同位素点击展开元素

expand element on click with isotope

css

sorting

click

jquery-isotope

expand