单击同一个按钮时如何显示或隐藏div？答案

【问题标题】：How to show or hide a div when clicking on the same button?单击同一个按钮时如何显示或隐藏div？
【发布时间】：2021-01-27 13:03:02
【问题描述】：

当我想在传单地图上添加交互性时遇到问题。

我的地图上有一个按钮

<button id="az">Availability Zones</button>

我想要的是当我点击它时，它会在我的地图上显示一个正方形的信息所以我创建了一个正方形

<div class="square" id='square'> </div> 
CSS = .square{
  z-index: 4000;
   width: 100%;
  height: 0;
  padding-top: 100%;
  background-color: #ccc;
  position: absolute;
  display: none;
}

还有一个具有相同属性但带有显示的 css 类方块：块

.squareclick{
  z-index: 4000;
   width: 30%;
  weight: 30%;
  padding: 0 25 30;
  margin-left: 400px;
  margin-bottom: 200px;
  height: 0;
  padding-top: 100%;
  background-color: #ccc;
  position: relative;
  display: block;
}

现在，为了在按钮上打开这个方块，我添加了一些交互性

var button = document.getElementById('az')
L.DomEvent.on(button,'click',function(e){
    console.log('Button clicked')
});

L.DomEvent.on(button,'click',function(){
    document.getElementById('square').setAttribute("class", "squareclick");
  
});

问题是那个按钮可以用来打开正方形，但不能用来关闭（我知道这是正常的）我试过那个东西，但它似乎不起作用

L.DomEvent.on(button,'click',function myFunction() {
  var x = document.getElementById("square");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

我不知道如何在同一个按钮上添加第二个交互性:(

如果有人可以帮忙！非常感谢

【问题讨论】：

标签： javascript html css leaflet maps

【解决方案1】：

您可以尝试做的不是直接检查正方形是否可见，而是可以设置一个变量来检查。变化：

L.DomEvent.on(button,'click',function myFunction() {
  var x = document.getElementById("square");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

收件人：

var shown = false;    

L.DomEvent.on(button,'click',function myFunction() {
  var x = document.getElementById("square");
  if (shown == false) {
    x.style.display = "block";
    shown = true;
  } else if (shown == true) {
    x.style.display = "none";
    shown = false;
  }
}

变量shown 一开始就告诉我们正方形是不可见的。每次单击按钮时，变量都会发生变化，样式也会发生变化。如果正方形在开始时可见，那么您只需在脚本开始时将shown 更改为true。看看这种方式是否有效。 :)

【讨论】：

【解决方案2】：

我建议只向正方形添加一个更改display: none 样式的类。

var button = document.getElementById('az')
var square = document.getElementById('square')
L.DomEvent.on(button,'click',function(e){
    console.log('Button clicked')
    if(L.DomUtil.hasClass(square,'show')){
        L.DomUtil.removeClass(square,'show');
    }else{
        L.DomUtil.addClass(square,'show');
    }
});

.square{
  z-index: 4000;
   width: 30%;
  weight: 30%;
  padding: 0 25 30;
  margin-left: 400px;
  margin-bottom: 200px;
  height: 0;
  padding-top: 100%;
  background-color: #ccc;
  position: absolute;
  display: none;
}

.show{
  display: block;
}

https://jsfiddle.net/falkedesign/v8tdzmhe/

【讨论】：