Javascript

Question

我这周开始学习 javascript，我正在了解基础知识。我已经开始为使用切换开关打开和关闭目标 divs.

的页面构建“常见问题解答”部分

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

现在，在我将这些函数应用到运行之前，“onLoad”都工作正常。然而，现在只有第二个函数可以切换 divs，但是声明 divs 折叠 onLoad 的函数不是。

我哪里错了？

此外，鉴于我是新手，如果有更好的方法或更多 shorthand 版本，请随时告诉我 :)

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>

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

.hidden {
  display: none;
}

现在我们可以切换此 class 来显示和隐藏内容。

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

同时从 body 中删除 toggleOnLoad 函数并在内容 div

中添加 hidden

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

最后，toggleFunction必须在content的hiddenclass的基础上加上右边的class。

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>

Javascript - 加载多个函数 onLoad

Javascript - Loading Multiple functions onLoad

html

css

toggle

onload