jQuery在同级孩子的多个状态中循环点击

Question

我的问题是，我试图将内容从元素处于其原始大小时的一种状态切换到处于其扩展或活动大小时的不同内容。

假设我有元素A，B，C和D。每个元素都有两种状态：（1）静止[原始大小并显示一组内容]和（2）活动[放大并显示不同组的内容]。 如果我单击A，它将从A1变为A2。 现在，如果单击C，它将从C1转到C2，而A应该从A2转到A1。 我已经调整了大小，但是我无法弄清楚该如何切换内容。

我不确定是我的jQuery还是设置HTML / CSS的方式，但是我很茫然。

我觉得我的解释不太好，但是一旦您看到示例，就应该清楚。

这是我现在拥有的代码。 它也位于jsfiddle上， 网址为https://jsfiddle.net/vsjx5w5r/

的HTML

<section id="grid">
    <div class="grid-sizer"></div>
    <div class="grid-item">
        <div class="grid-item-content">
            <div class="item-contents show">First test.</div>
            <div class="item-contents">Expanded</div>
        </div>  
    </div>

    <div class="grid-item">
        <div class="grid-item-content">
            <div class="item-contents show">Second test.</div>
            <div class="item-contents">Second Expanded</div>
        </div>  
    </div>

    <div class="grid-item">
        <div class="grid-item-content">
            <div class="item-contents show">Third test.</div>
            <div class="item-contents">Third Expanded</div>
        </div>
    </div>

    <div class="grid-item">
        <div class="grid-item-content">
            <div class="item-contents show">Fourth test.</div>
            <div class="item-contents">Fourth Expanded</div>
        </div>
    </div>

    <div class="grid-item">
        <div class="grid-item-content">
            <div class="item-contents show">Fifth test.</div>
            <div class="item-contents">Fifth Expanded</div>
        </div>
    </div>
</section>    

的CSS

* {
  box-sizing: border-box;
}
#grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-item {
  float: left;  
  background: red;
  -webkit-transition: background 0.4s, box-shadow 0.4s;
          transition: background 0.4s, box-shadow 0.4s;
}
.grid-sizer,
.grid-item {
  width: 33%;
  padding-bottom: 33%;
  border: 1px solid #000;
}
.grid-item.is-expanded,
.grid-item.is-expanded .grid-item-content {
  width: 66%;
  padding-bottom: 66%;
}
.grid-item.is-expanded {
  z-index: 2;
}
.grid-item-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  background: yellow;
}
@media (max-width: 767px) {
  .grid-sizer,
  .grid-item {
    width: 50%;
    padding-bottom: 50%;
    border: 1px solid #000;
  } 
  .grid-item.is-expanded,
  .grid-item.is-expanded .grid-item-content {
    width: 100%;
    padding-bottom: 100%;
  } 
}
.grid-item-content div.item-contents {
  display: none;
  transition: all .5s ease;
}
.grid-item-content div.item-contents.show {
  display: block;
}

JQUERY

$(document).ready(function () { 
  var $grid = $('#grid').isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
      columnWidth: '.grid-sizer'
    }
  });

  $grid.on( 'click', '.grid-item-content', function() {
    $(this).parent('.grid-item').toggleClass('is-expanded').siblings().removeClass('is-expanded');      
    $(this).children().toggleClass('show');

    // This is the part that isn't working correctly.
    if ($(this).parent('.grid-item.is-expanded').siblings().children().children('.item-contents:nth-child(2)').hasClass('show')) {
        $(this).parent('.grid-item').siblings().children().children().toggleClass('show');
    };

    $grid.isotope('layout');
  });
}); 

Answer 1

就个人而言，我会这样做：

// First give .grid-item elements a 'setContent' behaviour, which can be triggered.
$('.grid-item').on('setContent', function() {
    $(this).find('.grid-item-content').children().removeClass('show') // remove 'show' from both children.
    .eq(+$(this).hasClass('is-expanded')) // .eq(0) or .eq(1) selects first or second child.
    .addClass('show'); // add 'show' to the selected child.
});

// Invoke isotope() on #grid.
var $grid = $('#grid').isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
        columnWidth: '.grid-sizer'
    }
})
// and attach a delegated click handler
.on('click', '.grid-item-content', function() {
    $(this).parent('.grid-item').toggleClass('is-expanded') // toggle the class
    .siblings().removeClass('is-expanded') // remove 'is-expanded' from the parent's siblings
    .addBack() // add the original .grid-item back into the selection
    .trigger('setContent'); // trigger the 'setContent' behaviour on all .grid-item elements.

    $grid.isotope('layout');
});

更新的小提琴

所有棘手的内容都位于两个冗长的jQuery链中，如果没有这些注释，它们看起来要好得多。