javascript - 滑出内容框，记住最后一个事件框

Question

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

• 网格项(三分之一)
• 网格项(三分之一)
• 网格项(三分之一)

• 网格项(一个整体)

• 网格项(三分之一)

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

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

它工作正常，如果我单击图像，内容将向下滑动，如果我再次单击它，它将向后滑动。问题是，当我单击第一个图像然后单击第二个图像时，它不知道单击了不同的图像，因此新内容被放置在“一个整体”网格项中，但它会向上滑动，就像单击的是同一张图像一样.

理想情况下我会这样:

• 点击第一张图片 -> 内容滑出
• 点击第二张图片 -> 旧内容向上滑动，然后新内容滑出
• 再次点击第二张图片 -> 内容向上滑动

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

如果您只想查看 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();

});

代码笔:http://codepen.io/anon/pen/PPaOdW