javascript - 如何使用单个 HTML 按钮切换 React 小部件的可见性

Question

我有一个这样的 html 页面:

<div id="app"></div>
<button id="toggle"></div>

我想在单击 #toggle 按钮时切换 #app div 的可见性。

Answer 1

使用 jquery，只需一个简单的点击处理程序并更改显示

function toggle() {
  if ($('#app').css('display') == 'none')
    $('#app').css('display', '')
  else
    $('#app').css('display', 'none')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">some stuff</div>
<button onClick="toggle()" id="toggle">toggle</button>

使用原生 js

function toggle() {
  var el = document.getElementById('app');
  if (el.style.display == 'none') 
    el.style.display = '';
  else
    el.style.display = 'none';
}

<div id="app">some stuff</div>
<button onClick="toggle()" id="toggle">toggle</button>