移出内容框，记住最后一个活动框

Question

我有一个包含8个网格项的网格(默认情况下只有6个是可见的)，如下所示：

• 网格项(三分之一)
• 网格项(三分之一)
• 网格项(三分之一)
• 网格项(一个整体)
• 网格项(三分之一)
• 网格项(三分之一)
• 网格项(三分之一)
• 网格项(一个整体)

“三分之一”网格项每个包含嵌入在<script type="text/template" />中的图像和隐藏内容，当单击“三分之一”网格项时，它将使用隐藏的内容填充其最近的“一个整体”网格项，然后向下显示内容。

它很好，如果我点击一个图像，内容将向下滑动，如果我再次点击它，它将滑动向上。问题是，当我单击第一个图像，然后单击第二个图像，它不知道一个不同的图像被点击，所以新的内容被放置在“一个整体”网格项中，但是它会像单击的图像一样向后滑动。

理想情况下，我会这样做：

• 单击“第一张图片”->内容滑出
• 单击第二张图片->旧内容幻灯片向上，然后新内容滑出
• 再次单击第二个图像->内容向上滑动

我有一个CodePen的这个精简的设置这里 (忽略缩小的这里)。

如果您希望只查看JS，您可以在这里这样做：

var Feature = (function () {

  var _dom = {
    $feature: $('.js-feature'),
    $trigger: $('.js-feature-trigger'),
    $content: $('.js-feature-content'),
    $placeholdWrap: $('.js-feature-placehold-wrap')
  };

  var init = function () {
    _bindFeatureClick();
  };

  var _bindFeatureClick = function () {
    _dom.$feature.on('click', function() {
      var $feature = $(this);
      var $trigger = $feature.find(_dom.$trigger);
      var $content = $feature.find(_dom.$content);
      var placehold = $feature.attr('data-feature-placehold');
      var $placehold = $(placehold);

      $placehold.html( $content.html() );

      _revealContent($placehold); 

      return false;
    });
  };

  var _revealContent = function ($placehold) {
    var $placeholdWrap = $placehold.closest(_dom.$placeholdWrap);
    var placeholdHeight = $placehold.outerHeight();

    if( $placeholdWrap[0].style.maxHeight ) {
      $placeholdWrap.parents('.collapsible').removeClass('is-active');
      $placeholdWrap.css( 'max-height', '' );
    } else {
      $placeholdWrap.parents('.collapsible').addClass('is-active');
      $placeholdWrap.css( 'max-height', placeholdHeight );
    }
  };

  return {
    init: init
  };

})();

Feature.init();

主要是让模块意识到一个新的图像已经被点击，然后比较旧的图像和新的图像，如果它是不同的，那么运行一个特定的功能。

任何帮助都将不胜感激。

Answer 1

好的，我稍微修改了一下你的代码。现在，我将内容字段隐藏在不隐藏的条件下，并且$placehold的内容与$content的内容相同，并且我交换了

_revealContent($placehold, $content.html()); 
$placehold.html( $content.html() );

经修订的守则：

$(function () {

  var Feature = (function () {

    var _dom = {
      $feature: $('.js-feature'),
      $trigger: $('.js-feature-trigger'),
      $content: $('.js-feature-content'),
      $placeholdWrap: $('.js-feature-placehold-wrap')
    };

    var init = function () {
      _bindFeatureClick();
    };

    var _bindFeatureClick = function () {
      _dom.$feature.on('click', function() {
        var $feature = $(this);
        var $trigger = $feature.find(_dom.$trigger);
        var $content = $feature.find(_dom.$content);
        var placehold = $feature.attr('data-feature-placehold');
        var $placehold = $(placehold);

        // Change Here
        _revealContent($placehold, $content.html()); 
        $placehold.html( $content.html() );


        return false;
      });
    };

      // Change Here
      var _revealContent = function ($placehold, a) {
      var $placeholdWrap = $placehold.closest(_dom.$placeholdWrap);
      var placeholdHeight = $placehold.outerHeight();

      // Change Here
      if( $placeholdWrap[0].style.maxHeight && a==$placehold.html() ) {
        $placeholdWrap.parents('.collapsible').removeClass('is-active');
        $placeholdWrap.css( 'max-height', '' );
      } else {
        $placeholdWrap.parents('.collapsible').addClass('is-active');
        $placeholdWrap.css( 'max-height', placeholdHeight );
      }
    };

    return {
      init: init
    };

  })();

  Feature.init();

});

Codepen：http://codepen.io/anon/pen/PPaOdW