Question

我在我的投资组合网站上使用MaterializeCSS。我已将标题+导航栏存储在文件header.html中，并使用jQuery load将其加载到每个页面上。（我知道这对SEO不好）

问题：
有时候sideNav不会在手机上打开，即使我正确地初始化它。

这是我的代码：

了header.html

<header class="header deep-purple center-align">
<div class="row valign-wrapper">
  <div class="col s6 right-align">
    <img class="responsive-img circle" src="/assets/media/profile.png" alt="" >
  </div>

    <div class="col s6 left-align">
      <img class="responsive-img" src="/assets/media/logo_main_light.svg" alt="">
    </div>

</div>
<h1 style="font-size: 4.2rem;">Haider Ali Punjabi</h1>

<nav>
<div class="nav-wrapper deep-purple darken-2">
  <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
  <ul class="hide-on-med-and-down">
    <li><a href="/index.html">About Me</a></li>
    <li><a href="/resume.html">Resume</a></li>
    <li><a href="/projects.html">Projects</a></li>
    <li><a href="/photography">Photography</a></li>
  </ul>
  <ul class="side-nav deep-purple darken-2" id="mobile-demo">
    <li><a href="/index.html">About Me</a></li>
    <li><a href="/resume.html">Resume</a></li>
    <li><a href="/projects.html">Projects</a></li>
    <li><a href="/photography">Photography</a></li>
  </ul>
</div>

index.js

jQuery(document).ready(function($) {

  $("#header").load("/header.html",function(){
    $(".button-collapse").sideNav();

  });
});

我知道我正在正确地初始化它，并且在导航栏被加载后，所以我不明白为什么这不起作用。

MaterialiseCSS：使用AJAX加载时初始化SideNav

0 个答案: