javascript - 第一次单击按钮时隐藏文本不可见

Question

我有一个带有按钮和一段文字的网页。单击该按钮应显示或隐藏该段落。最初显示段落时，一切正常。但是当段落被隐藏时，第一次点击没有任何后果 - 从第二次点击开始代码工作正常。为什么？我该如何解决？

这是我的代码:

function show_hide(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block' || e.style.display == '') {
    e.style.display = 'none';
  } else {
    e.style.display = 'block';
  }
}

.hidden {
  display: none;
}

<input type="button" onclick="show_hide('text_to_show_hide')" value="Show/Hide">
<p id="text_to_show_hide" class="hidden">This is the text that I want to show/hide.</p>

Answer 1

你需要一致性。您从 hidden 类开始 paragragh，它使段落隐藏，但在内联样式上没有“显示”属性。

添加或删除隐藏类:

function show_hide(id) {
  var e = document.getElementById(id);
  e.classList.toggle('hidden');
}

.hidden{
  display:none;
}

<input type="button" onclick="show_hide('text_to_show_hide')" value="Show/Hide">
 
<p id="text_to_show_hide" class="hidden">This is the text that I want to show/hide.</p>

或者只使用内联样式

function show_hide(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block' || e.style.display==''){
    e.style.display = 'none';
  } else {
    e.style.display = 'block';
  }
}

<input type="button" onclick="show_hide('text_to_show_hide')" value="Show/Hide">
 
<p id="text_to_show_hide" style='display:none'>This is the text that I want to show/hide.</p>