更改 div 可见性并切换按钮文本的 Javascript 切换按钮答案

【问题标题】：Javascript toggle button that changes div visibility, and toggles button text更改 div 可见性并切换按钮文本的 Javascript 切换按钮
【发布时间】：2012-12-14 16:35:01
【问题描述】：

如果我可以使用 jQuery，这会容易得多，但出于一些原因，我试图避免这样做。同时，我已经让一些脚本工作了——我正在尝试添加函数来切换按钮文本与 div 的状态。

<script type="text/javascript">
function toggleMe(a){
    var e = document.getElementById(a);
    if(!e) return true;
    if(e.style.display == "none") {
        e.style.display = "block"
    } else {
        e.style.display = "none"
    }
    return true;
}
</script>

该脚本可以很好地使用我当前的按钮：

<input type="button" onclick="return toggleMe('para0')" value="Expanse"><br> 
<div id="para0">TEST TEXT</div>

试图让文本切换到 div 可见性的状态。我见过的大多数答案都是使用 jQuery，而我将脚本放入的上下文使表单成为非选项。

【问题讨论】：

真正的诀窍是尝试使用普通的 ol'javascript。我使用它的上下文将非常简单并且必须是模块化的，所以我想尽可能地保持它自包含。

标签： javascript html button toggle

【解决方案1】：

我的 JS 有点生锈，我现在无法检查这个，但我认为这样的事情会做你想要的：

<input type="button" onclick="return toggleMe(this,'para0')" value="Expanse"><br> 
<div id="para0">TEST TEXT</div>

<script type="text/javascript">
    function toggleMe(btn,a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
      e.style.display="block";
      btn.value = "Hide";
   }
   else{
      e.style.display="none";
      btn.value = "Show";
   }
   return true;
  }
  </script>

修正了显示/脚本会显示的间距。

【讨论】：

【解决方案2】：

看看这是否有帮助：

HTML：

<button id="toggle">Toggle</button>
<div id="text">Lorem ipsum dolor sit amet.</div>

JavaScript：

var button = document.getElementById('toggle'),
    text = document.getElementById('text');

button.onclick = function() {
  var isHidden = text.style.display == 'none';
  text.style.display = isHidden ? 'block' : 'none';
};

演示： http://jsbin.com/emikux/1/edit

【讨论】：

你可以在回调中使用this。
好吧，这确实完成了脚本现在所做的事情（以更紧凑的形式），但我想要解决的真正问题是更改按钮内显示的文本（您的例如），这样它就会随着每次点击从一个文本到另一个文本来回切换；例如开/关。
button.innerHTML=isHidden?"Expand":"Contract";