Javascript - 加载多个函数 onLoad
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33785313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - Loading Multiple functions onLoad
提问by MarkHughes88
I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a "FAQ" section for a page that uses a toggle switch to open and close target divs.
我这周开始学习 javascript，我正在了解基础知识。我已经开始为使用切换开关打开和关闭目标 div 的页面构建“常见问题解答”部分。
However, by default the div's display is set to visible. I've put a function in that will set this to hidden, so that the dropdown's are collapsed on page load. I've tried stacking them (the toggle function, and display functions), separating them with a semi-colon within "onLoad" in the body tag.
但是，默认情况下 div 的显示设置为可见。我已经放置了一个函数，将其设置为隐藏，以便在页面加载时折叠下拉列表。我尝试将它们堆叠起来（切换功能和显示功能），在 body 标签的“onLoad”中用分号将它们分开。
Now, before I applied these functions to run "onLoad" both worked fine. However now only the 2nd function works that toggles the divs, but the function stating to have the divs collapsed onLoad is not.
现在，在我应用这些函数来运行“onLoad”之前，它们都运行良好。然而，现在只有第二个函数可以切换 div，但声明在加载时折叠 div 的函数不是。
Where am I going wrong here?
我哪里出错了？
Also, seeing as I'm new to this, if there's a better way, or more shorthand version of this feel free to let me know :)
另外，鉴于我是新手，如果有更好的方法或更多的速记版本，请随时告诉我:)
css:
css：
body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 3em 1em 3em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300;
height: 3em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 2em;
background-color: #eeeeee;
}
HTML & Javascript:
HTML 和 JavaScript：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle Template</title>
</head>
<body onLoad="toggleOnLoad(); toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<button id="toggle" onClick="toggleFunction()">
<img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%">
</button>
</div>
</div>
<div id="dropdown01" class="dropdowns">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</div>
</div>
<script>
function toggleOnLoad() {
document.getElementById('dropdown01').style.display = 'none';
}
function toggleFunction() {
var dropDown = document.getElementById('dropdown01');
var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png";
var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png";
if (dropDown.style.display != 'none') {
dropDown.style.display = 'none';
document.getElementById('toggle-image').src = dropDownExpand;
} else {
dropDown.style.display = '';
document.getElementById('toggle-image').src = dropDownCollapse;
}
}
</script>
</body>
</html>
回答by taruntejae
Do create an init function manually.
一定要手动创建一个 init 函数。
window.addEventListener("load", myInit, true); function myInit(){ // call your functions here.... };
By doing this you can call that set of functions anytime.
通过这样做，您可以随时调用该组函数。
回答by Life is good
The better way to do it i believe is to call your functions inside window.load instead of the body as follows:
我认为更好的方法是在 window.load 而不是 body 中调用你的函数，如下所示：
window.onload=function(){
toggleOnLoad();
toggleFunction();
}
