我正在尝试用问题作为按钮来切换一些文本,问与答样式,单击该按钮将显示其答案。当CSS未加载目标元素设置为display的页面时,它可以正常工作:无
但是,我希望在单击按钮之前默认情况下隐藏该元素。由于某种原因,以这种方式加载页面时,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 = '';
}}
最佳答案
代替
targetElement.style.display = '';
你必须写
targetElement.style.display = 'block';
在“如果”中,您必须检查是否已建立要阻止的显示。如果没有,则元素将不可见(由CSS规则设置):
if (targetElement.style.display == 'block') {
如果在CSS中设置display:none,则执行.style.display =''意味着您正在“擦除”内联值(优先于CSS文件中的值)。因此,通过执行此操作,可以在CSS中设置显示的新值为“ none”。通过将其设置为“块”,显示的最终值为块。
我建议您阅读有关如何应用CSS规则的内容。