Question

我需要帮助在页面加载时折叠可折叠的div。

我正在使用此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>

在点击<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>

我无法让页面在页面加载时关闭div#aboutme。

我希望此页面加载我的div已折叠。

我认为JS线

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

应该做的伎俩，但事实并非如此。我做错了什么？

感谢您的帮助。

Answer 1

如果您希望div加载折叠，只需编写以下内容

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

这应该可以解决问题。但是，如果您仍然对JavaScript解决方案感兴趣，请继续阅读正如你所说I can't get the page to close my div#aboutme on page load - 问题是你没有使用“onload”事件。只需将行document.getElementById('aboutme').style.display = 'none';放在您身体的onload属性中即可。像这样的东西

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

你应该用JavaScript看到结果。我建议您改用“样式”方法。好多了。

Answer 2

究竟如何让JS在窗口加载时运行？它可能只是在呈现页面之前运行

点击链接有效吗？如果是这样，那将证明问题只是加载序列

最简单的解决方案是将代码放在HTML文件的最末端，就在结束</body>标记之前。下面的代码更通用，可以放在任何地方。请注意，要重新打开链接，我将显示设置为“内联”（或阻止，即之前的任何内容 - 您可能希望将其保存到变量中以确保）

<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 个答案: