代码之家  ›  专栏  ›  技术社区  ›  pixeloco

用同位素单击展开元素

  •  0
  • pixeloco  · 技术社区  · 10 年前

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

    我看到过一些帖子讨论重新调整动画上的项目,但它们都为展开元素设置了高度,在我的情况下,高度将基于内容而不是相等。

    示例代码笔: 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>
    
    2 回复  |  直到 10 年前
        1
  •  0
  •   rob.m    10 年前

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

    $('.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
  •  0
  •   Macsupport    10 年前

    这里有另一种不使用滑动开关的方法。

    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;}