单击两次后切换

Toggle after clicking twice

本文关键字：两次 单击      更新时间：2023-09-26

我有一个JAVASCRIPT函数，可以在单击一个名为Hexagon的形状后更改一些内容，如下所示：

JAVASCRIPT

$( ".hexagon1").on("click", function() {
  $( "#hex-area-2" ).css('display','block');
  $( "#hex-area-2" ).css('transition','display 1s ease-in');
  $( "#left-line-animated-container-left").css('display','block');
  $( "#left-line-animated-container-right").css('display','block');
  $( "#left-line-animated-container-center").css('display','block');
  $( "#hex-area-1").css('height','300px');
  $( "#hex-area-centralizer").css('height','300px');
});

点击后，所有的东西都会改变，但如果我想恢复原始值，如果我再次点击这个六边形呢？有没有一种方法可以用javascript实现这一点？

我会使用CSS类来实现这一点。将默认CSS分配给特定的id，然后在主体上切换一个类，并让修改后的CSS属性级联到相应的元素：

/* Default CSS */
#hex-area-2 {
    ...
}
#left-line-animated-container-left {
    ...
}
#left-line-animated-container-right {
    ...
}
#left-line-animated-container-center {
    ...
}
#hex-area-1 {
    ...
}
#hex-area-centralizer {
    ...
}
/* CSS applied on click */
.hex1-toggle #hex-area-2 {
    display: block;
    transition: display 1s ease-in;
}
.hex1-toggle #left-line-animated-container-left,
.hex1-toggle #left-line-animated-container-right,
.hex1-toggle #left-line-animated-container-center {
    display: block;
}
.hex1-toggle #hex-area-1,
.hex1-toggle #hex-area-centralizer {
    height: 300px;
}
$( ".hexagon1").on("click", function() {
    $('body').toggleClass('hex1-toggle');
});

这种"级联"效果是CSS中的"C"。通过切换主体上的一个类，样式表将在触发DOM重绘时有效地级联所产生的更改。注意，在这种情况下，hex1-toggle类不必处于body级别。它可以而且可能应该位于与您要修改的元素中的所有最接近的父元素、祖父母等元素处。在这个演示的情况下，它被放在body级别，只是因为问题中没有提供HTML结构，我选择不推断。

为所有CSS创建类，然后onclick只切换这些类。

例如：

.hex-area-2{
  display:block;
}
$( ".hexagon1").on("click", function() {
    $( "#hex-area-2" ).toggleClass("hex-area-2");
});

我相信你可以设置类似的功能：

<script type='text/javascript'>
  $(function() {
    $('.hexagon1').toggle(function() {
      $( "#hex-area-2" ).css('display','block');
      $( "#hex-area-2" ).css('transition','display 1s ease-in');
      $( "#left-line-animated-container-left").css('display','block');
      $( "#left-line-animated-container-right").css('display','block');
      $( "#left-line-animated-container-center").css('display','block');
      $( "#hex-area-1").css('height','300px');
      $( "#hex-area-centralizer").css('height','300px');
    }, function() {
      // second click stuff here
    });
  });
</script>

除了在函数中包含所有操作之外，您还可以为每个切换状态创建一个样式，并根据需要添加/删除它们。

<script type='text/javascript'>
  $(function() {
    $('.hexagon1').toggle(function() {
      $('hexagon1').addClass('className');
    }, function() {
      $('hexagon1').removeClass('className');
    });
  });
</script>

var i = 1;
$( ".hexagon1").on("click", function() {
  if(i === 1) {
    $( "#hex-area-2" ).css('display','block');
    $( "#hex-area-2" ).css('transition','display 1s ease-in');
    $( "#left-line-animated-container-left").css('display','block');
    $( "#left-line-animated-container-right").css('display','block');
    $( "#left-line-animated-container-center").css('display','block');
    $( "#hex-area-1").css('height','300px');
    $( "#hex-area-centralizer").css('height','300px');
  } else {
    $( "#hex-area-2" ).removeAttr('style');
    $( "#left-line-animated-container-left").removeAttr('style');
    $( "#left-line-animated-container-right").removeAttr('style');
    $( "#left-line-animated-container-center").removeAttr('style');
    $( "#hex-area-1").removeAttr('style');
    $( "#hex-area-centralizer").removeAttr('style');
  }
  $i++; // add 1 to i
  $i = ($i === 3) ? 1 : $i; // if i is now 3 reset to 1
});

.removeAttr('style');将删除元素上的内联样式。如果您在CSS样式表中设置了样式，然后上面的jQuery添加了内联样式，因为这会删除整个style=""属性，它应该会将所有样式重置为原来的样式。

相关文章：