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

style.display对象始终检查内联样式值

问题是您在第一个条件中使用了e.style.display == ''，因为第一个DOM加载时没有显示值

尝试从您的情况中删除e.style.display == '' ...

function show_hide(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block') {
    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 2

你需要一致性。你开始使用班级hidden开始了这个段落，它会隐藏段落，但没有显示＆＃39;内联风格的财产。

添加和删除隐藏的类：

＆＃13;

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

＆＃13;

.hidden{
  display:none;
}

＆＃13;

<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>

＆＃13;

或仅使用内联样式

＆＃13;

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';
  }
}

＆＃13;

<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>

＆＃13;

Answer 3

试试这个：

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>

Answer 4

其他答案是正确的，您只是检查导致问题的内联显示值，但有一种更好的方法，而不是强制您的元素只使用内联样式。只需使用getComputedStyle。

if (window.getComputedStyle(e, null).getPropertyValue("display") == 'none' || window.getComputedStyle(e, null).getPropertyValue("display") == ''){
  e.style.display = 'block';
}

else{
  e.style.display = 'none';
}

Answer 5

您也可以声明一个类似于下面的布尔变量，并根据其状态显示和隐藏段落文本。

var isShown = false;

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

JSFIDDLE

Answer 6

你的逻辑错了。

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

.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>

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

6 个答案: