Question

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

所以我想说我有元素A，B，C＆amp; D.并且每个元素具有两种状态，（1）休息[原始大小并显示一组内容]和（2）活动[放大并显示不同的内容组]。如果我单击A，它将从A1转到A2。现在，如果我点击C，它会从C1进入C2，A应该从A2回到A1。我已经把尺寸调整得很好，但它的内容切换我无法弄清楚该怎么做。

我不确定它是我的jQuery还是我设置HTML / CSS的方式，但我不知所措。

我觉得我没有很好地解释它，但是一旦你看到这个例子就应该很清楚。

这是我现在的代码。这也是https://jsfiddle.net/vsjx5w5r/

上的jsfiddle

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

<强> Updated fiddle

所有棘手的东西都在两个冗长的jQuery链中，没有评论就看起来好多了。

jQuery循环浏览兄弟姐妹的多个状态点击

HTML

CSS

JQUERY

1 个答案: