页面加载时JavaScript / HTML div崩溃了吗？

Question

I need help collapsing a collapsible div on page load. 我需要在页面加载时折叠可折叠div的帮助。

I'm using this JavaScript code: 我正在使用以下JavaScript代码：

<script type="text/javascript">
    function switchMenu(obj) {
        var el = document.getElementById(obj);
        if ( el.style.display != "none" ) {
            el.style.display = 'none';
        }
        else {
            el.style.display = '';
        }
    }
    document.getElementById('aboutme').style.display = 'none';
</script>

to collapse HTML div id="aboutme" when the <a ...>about me</a> is clicked: 点击<a ...>about me</a>时，折叠HTML div id =“ aboutme”：

<div class="container">
    <a href="#" onclick="switchMenu('aboutme');">about me</a>
    <div id="aboutme">
        sample text to be expanded and collapsed
    </div>
</div>

I can't get the page to close my div#aboutme on page load. 我无法在页面加载时关闭页面以关闭div#aboutme 。

I want this page to load with my div collapsed. 我希望此页面在div折叠的情况下加载。

I thought that the JS line 我以为是JS线

document.getElementById('aboutme').style.display = 'none';

should do the trick but it doesn't. 应该可以解决问题，但事实并非如此。 What am I doing wrong? 我究竟做错了什么？

Thanks for your help. 谢谢你的帮助。

Answer 1

If you want your div to load collapsed, simply write the following 如果您希望div加载时折叠，只需编写以下内容

 <div id="aboutme" style="display:none">
        sample text to be expanded and collapsed
    </div>

This should resolve the problem. 这样可以解决问题。 However, if you are still interested in the JavaScript solution keep reading. 但是，如果您仍然对JavaScript解决方案感兴趣，请继续阅读。
As you said I can't get the page to close my div#aboutme on page load - the problem is that you are not using "onload" event. 如您所说， I can't get the page to close my div#aboutme on page load问题是您未使用“ onload”事件。 Simply put the line document.getElementById('aboutme').style.display = 'none'; 只需将行document.getElementById('aboutme').style.display = 'none'; in your body's onload attribute.. something like this 在您身体的onload属性中。

<body onload="document.getElementById('aboutme').style.display = 'none';">
...
</body>

and you should see the results with JavaScript. 并且您应该使用JavaScript查看结果。 I recommend you use "style" method instead. 我建议您改用“样式”方法。 much better. 好多了。

Answer 2

Exactly how do you make that JS run on window load? 究竟如何使JS在窗口加载时运行？ It may simply run before the page is rendered 它可能只是在呈现页面之前运行

Does clicking on the link work? 单击链接有效吗？ if it does, that would prove that the issue is simply the loading sequence 如果确实如此，那将证明问题仅仅是加载顺序

The easiest solution would be to place your code at the very end of your HTML file, just before the closing </body> tag. 最简单的解决方案是将代码放在HTML文件的最后，紧接</body>标记之前。 The code below is more generic, and can be placed anywhere. 下面的代码更加通用，可以放在任何地方。 Note that to toggle the link back on I set the display to 'inline' (or block, ie whatever it was before - you may want to save that to a variable to be sure) 请注意，要切换回链接，我将显示设置为“内联”（或阻止，即之前的显示-您可能需要将其保存到变量中以确保确定）

<script type="text/javascript">
function switchMenu(id) {
    var el = document.getElementById(id);
    if ( el.style.display != "none" ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = 'inline'; //or block - i.e. whatever it is rendered by
    }
}

//add to the window onload event
if( window.addEventListener ){
    window.addEventListener( 'load', function(){ switchMenu('aboutme')}, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", function(){ switchMenu('aboutme') } );
}
</script>

页面加载时JavaScript / HTML div崩溃了吗？

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-01-01 12:41:07

解决方案2
1 2012-01-01 12:59:47

页面加载时JavaScript / HTML div崩溃了吗？

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-01-01 12:41:07

解决方案2 1 2012-01-01 12:59:47

解决方案1
2 已采纳 2012-01-01 12:41:07

解决方案2
1 2012-01-01 12:59:47