如何使用单个HTML按钮直观地切换React小部件

Question

我有一个这样的html页面：

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

我想在单击#app按钮时切换#toggle 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>