草庐IT

Javascript - 加载多个函数 onLoad

coder 2025-01-29 原文

我这周开始学习 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>

最佳答案

一定要手动创建一个 init 函数。

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

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

关于Javascript - 加载多个函数 onLoad，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33785313/

JavascriptonLoadsection34togglehtmlcss

有关Javascript - 加载多个函数 onLoad的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  3. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  4. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  5. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  6. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  7. ruby-on-rails - 在 ruby​​ .gemspec 文件中，如何指定依赖项的多个版本？ - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这

  8. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  9. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

    我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了

  10. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

随机推荐