通过单击设置的像素数切换砌体图像高度

Question

如果此查询的标题不清楚，请告诉我。下面的代码摘录会使点击的图像消失。

我已经评论了code that toggles an element's height between a set number of pixels. I have reviewed Desandro's masonry toggle code. And I have reviewed the jquery documentation。尽管如此，我仍在努力实现解决方案。

我很欣赏这对专家来说可能很简单，但对于新手来说，一些指导将不胜感激。

i_stack

$grid.on('click', '.grid-item', function() {
  $(this).toggle(
    function() {
      $(this).height($(this).height() + 100);
    },
    function() {
      $(this).height($(this).height() - 100);
    }
  );
});

Answer 1

首先，toggle 是为了完全隐藏或显示一个元素：

Description: Display or hide the matched elements.

相反，请考虑 animate 使用您自己的切换逻辑。

var counter = 0;

$('.grid').on( 'click', '.grid-item', function() {
  // counter will toggle between 0 or 1
  let direction = ++counter % 2 === 1 ? "-=100px" : "+=100px";
  $(this).animate({ "height": direction }, "slow" );
});

.grid-item {
  background-color: blue;
  color: white;
  height: 150px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
  <div class="grid-item"></div>
</div>

https://jsfiddle.net/qxb10rnv/

通过单击设置的像素数切换砌体图像高度

Toggle masonry image height by set number of pixels on click

html

css

jquery

jquery-masonry