Question

我有一个包含8个网格项的网格（默认情况下只有6个可见），它类似于：

网格项目（三分之一）
网格项目（三分之一）
网格项目（三分之一）
网格项目（一整体）
网格项目（三分之一）
网格项目（三分之一）
网格项目（三分之一）
网格项目（一整个）

＆＃34;三分之一＆＃34;网格项目每个都包含一个嵌入<script type="text/template" />的图像和隐藏内容，当一个＆＃34;三分之一＆＃34;网格项被点击它将填充它最近的＆＃34;一个整体＆＃34;带有隐藏内容的网格项，然后向下滑动显示内容。

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

理想情况下我会这样：

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

我有一个精简版设置here的CodePen（忽略缩小的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();

});

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

滑出内容框，记住上一个活动框

1 个答案: