是否在页面加载时折叠JavaScript/HTML div？

cigdeys3 于 2022-12-02 发布在 Java

关注(0)|答案(2)|浏览(145)

我需要帮助折叠页面加载时可折叠的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';

应该可以，但它没有。我做错了什么？
谢谢你的帮助。

Html

来源：https://stackoverflow.com/questions/8693033/collapsing-javascript-html-div-on-page-load

2条答案

按热度按时间

mv1qrgav1#

如果希望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”事件。

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

你应该可以看到JavaScript的结果。我建议你用“style”方法代替。好得多。

赞(0）回复(0）举报 2022-12-02

lmvvr0a82#

究竟如何让JS在窗口加载时运行呢？它可能只是在页面呈现之前运行
点击链接是否有效？如果有效，这将证明问题仅仅是加载顺序
最简单的解决方案是把你的代码放在HTML文件的最后，就在结束标记</body>之前。下面的代码更通用，可以放在任何地方。注意，为了切换链接，我把显示设置为'inline'（或block，也就是说，不管它之前是什么--你可能想把它保存到一个变量中以确保）

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

赞(0）回复(0）举报 2022-12-02

我来回答

是否在页面加载时折叠JavaScript/HTML div？

2条答案

相关问题

热门标签

最新问答