如何在同一个div中添加第二次点击？

Question

我有两个盒子。我想创建函数，这将给我一些功能。

1. 如果我点击黑匣子，会显示红色的一个。
2. 当我再次点击一个黑匣子时，我想要隐藏红色方框。

这就是我所做的：

var showMeRedBox = document.getElementsByClassName('box2_red')[0]
var blackBox = document.getElementsByClassName('box1_black')[0]
var redBox = document.getElementsByClassName('box1_black')[0]
var hideRedBox = document.getElementsByClassName('box2_red')[0]



var showMe = function(show) {
  showMeRedBox.style.display = show
}
blackBox.onclick = function() {
  showMe('inline-flex');
}



var hideMe = function(hide) {
  hideRedBox.style.display = hide
}
blackBox.click = function() { // here should be seocnd click, when I want to hide the red box
  hideMe('none');
}

有人给我建议，我该怎么做？ 谢谢， 鲇鱼

Answer 1

您可以使用变量来保存redBox的状态，然后在内部点击询问它：

var isHidden = false;
blackBox.click = function() {
    if (isHidden) {
       isHidden = false;//show the box
    } else {
       isHidden = true;
       hideMe('none');
    }
}

Answer 2

如果您熟悉

，可以使用AJAX

参考https://www.youtube.com/watch?v=rJesac0_Ftw

的AJAX部分

希望有所帮助