0

抱歉，如果之前已回答过此问题；我挖了一圈，但找不到。我通过调用对我有用的 M.AutoInit() 来使用 Materialize sidenav，直到我尝试将它放在单独的 Javascript 文件中。我已经能够以这种方式设置页脚，所以我没有重复代码，但这似乎不适用于 sidenav。sidenav 显示，但可折叠部分不会打开。

我认为问题在于它不喜欢从动态插入的 HTML 中调用可折叠部分。但我尝试分离出也不起作用的可折叠部分（使用 2 个不同的 querySelectors）。如果我将至少部分 sidenav 放回我的 HTML 页面，这将违背我这样做的目的。

有什么想法或解决方案吗？感谢您的关注！

document.addEventListener("DOMContentLoaded", () => {
  M.AutoInit()

  document.querySelector('header').insertAdjacentHTML('afterbegin',
    `<ul id="slide-out" class="sidenav sidenav-fixed">
      <li>
        <a
          href="https://www.greece.org/"
          target="_blank"
          rel="noopener noreferrer"
          >HEC Main</a
        >
      </li>
      <li>
        <a href="index.html" class="sidenav-close" rel="noopener noreferrer"
          >Home</a
        >
      </li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
            <li>
            <button class="collapsible-header">
              History<i class="material-icons">arrow_drop_down</i>
            </button>
            <div class="collapsible-body">
              <ul class="sidenav-close">
                <li>
                  <a href="a-brief-review.html">A Brief Review</a>
                </li>
                <li><a href="philosophers-list.html">Philosophers List</a></li>
                <li><a href="philosophers-map.html">Philosophers Map</a></li>
                <li><a href="the-beginning.html">The Beginning</a></li>
                <li><a href="socrates.html">Socrates</a></li>
                <li><a href="plato.html">Plato</a></li>
                <li><a href="aristotle.html">Aristotle</a></li>
                <li>
                  <a href="bibliography-references.html"
                  >Bibliograpy / References</a
                  >
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
      <li class="divider"></li>
      <li>
        <a href="media.html" class="sidenav-close">Media</a>
      </li>
      <li>
        <a href="events.html" class="sidenav-close">Events</a>
      </li>
    </ul>`)

  document.querySelector('main').insertAdjacentHTML('afterend',
    `<footer class="page-footer">
        <div class="container">
          <p class="center-align">
            Philosophy is sponsored by
            <a
              href="https://www.greece.org"
              target="_blank"
            >
              www.greece.org 
            </a> | &copy; 2021 All Rights Reserved.
          </p>
        </div>
       <div class="fixed-action-btn">
        <a href="#top" class="btn-floating btn-large" style="background-color: silver;">
          <i class="large material-icons">arrow_upward</i>
        </a>
      </div>
    </footer>`)
})
4

1 回答 1

0

初始化是一次性的 - 它扫描文档以查找匹配的选择器，并在其上运行初始化。因此，始终在添加任何动态内容后运行初始化。如果您即时添加内容，只需再次运行 init。

代码笔。

document.addEventListener('DOMContentLoaded', function() {
   // Always add stuff to the page BEFORE running the init
   // Anything hardcoded to the page will be fine if wrapped in a document ready.
   M.AutoInit();
   // Anything added after the init will NOT be initialised. It's a one time thing. Run the init at the end of any dynamic additions.
});
于 2021-04-19T11:16:19.913 回答