Question

本周我开始学习javascript，而且我已经掌握了基础知识。我已经开始为使用切换开关来打开和关闭目标div的页面构建“FAQ”部分。

但是，默认情况下，div的显示设置为可见。我已经设置了一个函数，将其设置为隐藏，以便下拉列表在页面加载时折叠。我已经尝试堆叠它们（切换功能和显示功能），在body标签的“onLoad”中用分号分隔它们。

现在，在我应用这些函数来运行“onLoad”之前，两者都运行良好。但是现在只有第二个函数可以切换div，但是声明让div崩解onLoad的函数不是。

我在哪里错了？

此外，看到我是新手，如果有更好的方法，或者更多的速记版本，请随时告诉我：）

的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＆amp;使用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>

Answer 1

手动创建初始化函数。

window.addEventListener("load", myInit, true); function myInit(){  // call your functions here.... };

通过这样做，您可以随时调用该组功能。

Answer 2

更好的方法我相信是在window.load中调用你的函数而不是body，如下所示：

window.onload=function(){
toggleOnLoad();
toggleFunction();
}

Answer 3

感谢 @taruntejae
（对不起，由于我的声誉，我无法添加评论）

这非常简单易用

window.addEventListener("load",function(){
    // your code
});

或用户ES6箭头功能，如

window.addEventListener("load",(e)=>{
    // your code
});

由于“ addEventListener的第三个参数是可选的”

Javascript - 在onLoad上加载多个函数

3 个答案: