我正在尝试用问题作为按钮来切换一些文本,问与答样式,单击该按钮将显示其答案。当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规则的内容。

10-07 19:49
查看更多