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

我需要帮助折叠页面加载时的可折叠div。在页面加载时折叠JavaScript/HTML 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>

崩溃HTML DIV ID = “aboutme” 当<a ...>about me</a>点：

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

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

感谢您的帮助。

来源

2012-01-01 mplewis

只需将脚本后html代码 – naveen 2012-01-01 12:18:08

你可以发布一个不起作用的实例吗？ jsfiddle是一个很好的地方，那么我们会更容易帮忙。 – 2012-01-01 12:27:08

如果你希望你的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的结果。我建议你改用“风格”方法。好多了。

来源

2012-01-01 12:41:07

谢谢！这个html解决方案正是我正在寻找的简单方法。 – mplewis 2012-01-01 22:39:59

究竟如何让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>

来源

2012-01-01 12:59:47 gotofritz

感谢您的解决方案！ – mplewis 2012-01-01 22:39:44

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

回答

相关问题