javascript - isHidden 函数要求我在应用响应式显示时单击两次

Question

我已经使用隐藏功能一段时间了，它在我的网站上运行良好；

 <script>
function isHidden(oDiv){
  var vDiv = document.getElementById(oDiv);
  vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';
}

功能性 html 代码如下所示；

<div style="display: true;" style="cursor: hand;" onclick="isHidden('excerpt105')"><span class="opinion-title3">title</span></div><div id="excerpt105" style="display: true;"><span class="opinion-content">Here is a paragraph.</span></div>

在页面上是这样的(这是一个中文站点)；

The display of my site

后来我在css文件中加入了一些@media标签，试图实现以下目标:当页面大小小于768px时，隐藏所有段落(如上图所示)；并向他们展示相反的内容。这是我的 CSS 代码；

@media(max-width:768px){
.opinion-display {display: none;}
.opinion-tip-display {display: true;} }

@media(min-width:769px){
.opinion-display {display: true;}
.opinion-tip-display {display: none;} }

.opinion-display 是我用来实现我的目的的类，它在“显示和隐藏”部分方面效果很好。

更新后的html代码是这样的；

<div style="display: true;" class="cursor: hand;" onclick="isHidden('excerpt105')"><span class="opinion-title3">title</span></div><div id="excerpt105" class="opinion-display"><span class="opinion-content">Here is a paragraph.</span></div>

问题是，当页面大小低于 768px 并且所有段落都被隐藏时，我需要在任何标题上单击两次才能显示这些段落。在我使用这个@media 属性之前，这从未发生过。

请大家帮忙...

Answer 1

您删除了内联样式，因此 vDiv.style.display 第一次没有任何值

所以当这段代码运行时:

  vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';  

对于第一次，display 等于undefined，因此表达式计算为'none'，当您单击< strong>第二次 终于是 'none' 所以可以改成 'block'

您可以在您的函数中执行以下操作:

 vDiv.style.display = (!vDiv.style.display || vDiv.style.display == 'none') ? 'block' : 'none';

还有 display:true; 是无效的 css。

编辑:上述解决方案仅考虑了元素的内联样式属性，该属性可能为空，并且元素的样式取自外部样式表。由于这个空的 style.display 不能被视为与 display:none 相同 - 它在元素最初可见时不起作用。

要解决它，有必要检查 computed style元素:

  var vDiv = document.getElementById(oDiv);
  var elementStyle = window.getComputedStyle(vDiv);
  vDiv.style.display = (elementStyle.display == 'none') ? 'block' : 'none';

jsFiddle