Materialise sidenav collapsible 不能在单独的 JS 文件中工作
Materialize sidenav collapsible won't work within a separate JS file
抱歉,如果之前已经回答过这个问题;我已经四处寻找但找不到它。我通过调用 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> | © 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>`)
})
初始化是一次性的——它会扫描文档以寻找匹配的选择器,然后运行对其进行初始化。因此,总是 运行 在添加任何动态内容之后进行初始化。如果您即时添加内容,只需 运行 再次初始化即可。
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.
});
抱歉,如果之前已经回答过这个问题;我已经四处寻找但找不到它。我通过调用 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> | © 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>`)
})
初始化是一次性的——它会扫描文档以寻找匹配的选择器,然后运行对其进行初始化。因此,总是 运行 在添加任何动态内容之后进行初始化。如果您即时添加内容,只需 运行 再次初始化即可。
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.
});