Question

我一直使用ishidden函数，它可以正常使用我的网站;

 <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

后来我将一些@media标签放入css文件中尝试实现以下目标：当页面大小低于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是我用来实现我的目的的类，对于“show and hide”部分来说效果很好。

更新的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'，当您点击第二次时间时'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

Answer 2

无效的css属性值

.opinion-tip-display {display: true;}
.opinion-display {display: true;}

应该是

.opinion-tip-display {display: block;}
.opinion-display {display: blcck;}

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

2 个答案: