javascript - 展开和折叠 div

Question

我有一个项目列表，它们保存图像，每个图像为 800w x 600 H。原始 div 高度为 800 W x 300 H。我想出了如何在单击时展开 div，但我想要了解当您在已展开的情况下单击它时如何折叠它。现在我只是进一步扩展 div

  $('.expand').bind('click', function() {
  var currHeight = $(this).css('height').replace(/px/,'');
  currHeight = currHeight * 1;
  var newHeight = currHeight + 500;
  $(this).animate({
     height: newHeight
  },1000);

 });

关于如何创建 if else 语句的任何想法，该语句会说，如果 div 已经展开，则单击时折叠，或者如果 div 折叠，则展开到 # of px。

Answer 1

您可以检测当前的高度和分支:

$('.expand').bind('click', function() {
  var $this = $(this),
      height = $this.height();
  if (height > 500) {
    height -= 500;
  }
  else {
    height += 500;
  }
  $this.animate({
     height: height
  },1000);
});

我在那里做了一些其他的事情。您可以使用height而不是 css('height') 来获取没有单位的值，并且不需要 * 1 技巧。我还完成了 $(this) once 并重用了它，因为当您调用 $()< 时会涉及多个函数调用和分配 功能。 (这里并不重要，但只要你缓存的时间不超过你想要的时间[通过闭包或类似的]，这是一个好习惯。)

或者，您可以记住您已经通过另一种方式完成了此操作(使用 data 功能):

$('.expand').bind('click', function() {
  var $this = $(this),
      height = $this.height(),
      expanded = $this.data('expanded');
  if (expanded) {
    height -= 500;
  }
  else {
    height += 500;
  }
  $this.data('expanded', !expanded);
  $this.animate({
     height: height
  },1000);
});

或者将它们组合起来存储原始高度，以防它受到其他因素的影响:

$('.expand').bind('click', function() {
  var $this = $(this),
      height = $this.height(),
      prevHeight = $this.data('prevHeight');
  if (prevHeight) {
    height = prevHeight;
    $this.data('prevHeight', undefined);
  }
  else {
    $this.data('prevHeight', height);
    height += 500;
  }
  $this.animate({
     height: height
  },1000);
});

任君选择!