Javascript - 加载多个函数 onLoad答案

【问题标题】：Javascript - Loading Multiple functions onLoadJavascript - 加载多个函数 onLoad
【发布时间】：2015-11-18 16:28:22
【问题描述】：

我这周开始学习 javascript，并且正在学习基础知识。我已经开始为使用切换开关打开和关闭目标 div 的页面构建“常见问题解答”部分。

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

现在，在我应用这些函数运行“onLoad”之前，它们都运行良好。然而，现在只有第二个函数可以切换 div，但声明让 div 折叠 onLoad 的函数却没有。

我哪里错了？

另外，由于我是新手，如果有更好的方法，或者更多简写版本，请随时告诉我:)

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

}

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:

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

【问题讨论】：

标签： javascript html css toggle onload

【解决方案1】：

请手动创建一个初始化函数。

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

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

【讨论】：

太棒了，谢谢！这行得通！我不得不将“窗口”更改为“窗口”，因为它没有用大写“W”来接收它，但现在它工作正常。我不得不将我的变量移出 toggleFunction() 函数以使它们成为全局变量，以便它们被拾取，但除此之外，您的解决方案工作得很好:)
window.addEventListener("load",function(){ alert("loaded"); });
window.addEventListener("load",()=>{ alert("ES6"); }); 箭头函数

【解决方案2】：

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

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

【讨论】：

所以我只是把它放在我的标签的开头吗？还是需要在页面顶部加载？
这是 Javascript 代码，所以需要放在
这个方法可以，但是只能设置一次。接受的答案可以设置多次，因此如果您使用外部库，您可以隔离加载事件。

【解决方案3】：

你的想法是正确的。或许我们可以简化实现。

首先，让我们定义一个新类hidden 来删除元素。

.hidden {
  display: none;
}

现在我们可以切换这个类来显示和隐藏内容。

function toggleFunction() {
    ...
    content.classList.toggle('hidden')
    ...
}

同时从body 中删除toggleOnLoad 函数并将hidden 添加到内容div 中

<body onLoad="toggleFunction()">
  ...
  <div id="dropdown01" class="dropdowns hidden">
  ...
</body>

最后toggleFunction必须在content的hidden类的基础上添加正确的类。

function toggleFunction() {
    dropDown.classList.remove(expand, collapse)
    ...
  
    const state = content.classList.contains('hidden') ? collapse : expand
    dropDown.classList.add(state)
}

这是功能截图：

const content = document.getElementById('dropdown01')
const dropDown = document.querySelector('#toggle-image')
const collapse = 'fa-plus-square'
const expand = 'fa-minus-square'

function toggleFunction() {
    dropDown.classList.remove(expand, collapse)
    content.classList.toggle('hidden')
  
    const state = content.classList.contains('hidden') ? collapse : expand
    dropDown.classList.add(state)
}

body {
  background-color: #cccccc;
  padding: 0;
  margin: 0;
}

.container {
  margin-left: 20%;
  margin-right: 20%;
  background-color: white;
  padding: 1em 2em 1em 2em;
}

.toggle-header {
  padding: 0.5em;
  background-color: #0067b1;
  overflow: auto;
}

#toggle {
  border: none;
  width: 300px;
  height: 2em;
  background-color: #0067b1;
  outline: 0;
}

.button-container {
  float: right;
  margin-right: 0.5em;
  display: inline-block;
}

.dropdowns {
  padding: 1em;
  background-color: #eeeeee;
}

.hidden {
  display: none;
}

<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>

<body onLoad="toggleFunction()">
  <div class="container">
    <div class="toggle-header">
      <div class="button-container" title="">
        <i id="toggle-image" class="fas fa-plus-square" onClick="toggleFunction()"></i>
      </div>
    </div>
    <div id="dropdown01" class="dropdowns hidden">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
  </div>
</body>

【讨论】：