Question

我正试图切换一些文字，Q＆amp;将问题作为按钮的样式，单击时将显示其答案。当CSS没有加载目标元素设置为display：none
的页面时，它运行正常但是，我希望默认情况下隐藏元素，直到单击该按钮。出于某种原因，当以这种方式加载页面时，js函数不起作用。谁知道为什么？

HTML

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="sample.css" media="screen" />
    <script src="toggle.js" type="text/javascript"></script>
</head>
<body>
    <button type="submit" class="question" id="q1" onclick="toggle_visibility('q1')">
        This is my question?
    </button>
    <div class="dynamic-text-wrapper">
        <div class="answer" id="a1">
            Here is the answer to your question.
        </div>
    </div>
</body>
</html>

CSS

.dynamic-text-wrapper {height: 25px;}
.answer {
    height: 25px;
    display: none; /*DOESN'T WORK WHEN THIS LINE IS INCLUDED.  But I want to not displayed to be default*/}

的JavaScript

function toggle_visibility(questionID) {
var targetElement = document.getElementById('a'+parseInt(questionID.substring(1))); 
    if(targetElement.style.display == '') {
        targetElement.style.display = 'none';
    }
    else {
        targetElement.style.display = '';
    }}

Answer 1

而不是

targetElement.style.display = '';

你必须写

targetElement.style.display = 'block';

在'if'中，您必须检查是否已将显示屏设置为阻止。如果还没有，那么元素将是不可见的（由CSS规则设置）：

if (targetElement.style.display == 'block') {

如果在CSS中设置display：none，则执行.style.display =''表示您正在“删除”内联值（优先于CSS文件中的值）。因此，通过执行此操作，显示的新值将为“无”，如CSS中所设置的那样。通过将其设置为“阻止”，显示的最终值为阻止。

我建议你阅读一些关于如何应用CSS规则的内容。

Answer 2

选项1

使用

.answer {
    display: none; /* Hide by default */
}

和

targetElement.style.display = targetElement.style.display ? '' : 'block';

也就是说，如果targetElement.style.display是假的（你没有设置它，所以它默认是隐藏的），你将它设置为'block'。如果它是真实的（你已将其设置为'block'），则清除它。

选项2

此选项将使您的函数可以使用非块元素重复使用。

使用

<div class="answer default-hidden" id="a1"></div>

并且，在onload上，运行

var els = document.getElementsByClassName('default-hidden');
for(var i=0, l=els.length; ++i) els[i].style.display = 'none';

在你的功能中：

targetElement.style.display = targetElement.style.display ? '' : 'none';

为什么这个切换功能仅在元素以某种方式加载时才起作用？

2 个答案:

选项1

选项2