Question

我试图隐藏/显示基于点击按钮的div，但我无法让它工作。

以下是我的代码。我可以收到提醒，看到我从DOM获得了正确的ID，但我无法显示/隐藏div内容。

function toggleContent(id) {
  var e = document.getElementById(id);
  //if(e.style.display == null || e.style.display == "none") 
  if (e.style.visibility == null || e.style.visibility == "hidden") {
    //e.style.display = "block";
    e.style.visibility: "visible";
  } else {
    //e.style.display = "none";
    e.style.visibility: "hidden";
  }
}

<form>
  <button onclick="alertData();">Get Alerts</button>
  <button onclick="toggleContent('chart');">Chart</button>
  <hr>
  <div id="chart" style="visibility: hidden;">
    my chart
  </div>
</form>

Answer 1

您需要使用e.style.visibility而不是=设置:，就像在CSS文件中一样。

另请注意，值null相当于visible，而不是hidden。

＆＃13;

function toggleContent(id) {
  var e = document.getElementById(id);
  
  if (e.style.visibility == "hidden") {
    e.style.visibility = "visible";
  } else {
    e.style.visibility = "hidden";
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <button onclick="alertData();">Get Alerts</button>
  <button onclick="toggleContent('chart');">Chart</button>
  <hr>
  <div id="chart" style="visibility: hidden;">
    my chart
  </div>
</form>

＆＃13;

Answer 2

function toggleContent(id) {
 event.preventDefault();
var e = document.getElementById(id);
   
   e.style.visibility=="hidden" || e.style.visibility=="" ? e.style.visibility="visible": e.style.visibility="hidden";
   }

#chart{visibility:hidden;}

<form>
  <button onclick="toggleContent('chart');">Chart</button> 
    <hr>
        <div id="chart">
            my chart
        </div></form>

单击按钮隐藏/显示div

2 个答案: