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

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

javascript html css

Javascript 为什么此切换功能仅在以某种方式加载元素时才起作用？,javascript,html,css,Javascript,Html,Css,我正在尝试切换一些文本、问答风格，将问题作为一个按钮，单击后将显示其答案。当CSS没有加载目标元素设置为显示的页面时，它可以正常工作：无但是，我希望在默认情况下隐藏元素，直到单击按钮为止。由于某些原因，当以这种方式加载页面时，js函数不起作用。有人知道为什么吗 HTML <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="sam

我正在尝试切换一些文本、问答风格，将问题作为一个按钮，单击后将显示其答案。当CSS没有加载目标元素设置为显示的页面时，它可以正常工作：无
但是，我希望在默认情况下隐藏元素，直到单击按钮为止。由于某些原因，当以这种方式加载页面时，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>

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

而不是

targetElement.style.display = '';

你得写

targetElement.style.display = 'block';

在“如果”中，您必须检查是否已将显示设置为阻止。如果没有，elment将不可见（由CSS规则设置）：

如果在CSS中设置display:none，则doing.style.display=''表示正在“擦除”内联值（该值优先于CSS文件中的值）。因此，通过这样做，display的新值将是“none”，如CSS中所设置的。通过将其设置为“块”，显示的最终值为块

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

选项1 使用

及

也就是说，如果

targetElement.style.display

是falsy（您没有设置它，因此默认情况下它是隐藏的），则将其设置为

'block'

。如果它是真实的（您已将其设置为

'block'

），则清除它

选择2 此选项将使函数可与非块元素一起重用

使用

在你的职能中：

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

console.log（targetElement.style.display）

在您的

if（targetElement.style.display==''）{…}

之前，您将看到原因。对我来说效果很好。既可以使用CSS，也可以使用CSS。@wesmantooth:除了

之外，您还期望什么？因为元素没有直接应用该样式。你为什么要改变你的问题？还有一个选择，就是搞乱

窗口。getComputedStyle

，

currentStyle

和不同的实现。我真的很喜欢这个答案，使用了三元风格和奖金选项2。然而，我向奥斯卡给出了答案，因为两种解决方案都有效，而他首先给出了答案。

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

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

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

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

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