Question

Sidenav无法正常工作。我看过这个网站，但找不到我想要的解决方案。

这是一个ejs文件

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Portfolio Blog</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

   <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  </head>
  <body>
    <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">Tech Blog</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">About</a></li>
        <li><a href="#" data-activates="slide-out" class="button-collapse show-on-large right">
          <i class="material-icons">menu</i></a>
        </li>
      </ul>
<!-- SIDENAV -->
<ul id="slide-out" class="sidenav">
   <li><div class="user-view">
     <div class="background">
       <img src="images/office.jpg">
     </div>
     <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
     <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
   </div></li>
   <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
 </ul>

    </div>
  </nav>
    <h1>Index Page</h1>
  </body>
  <script type="text/javascript">
    $('.button-collapse').sidenav();
  </script>
</html>

我尝试通过将jquery更改为较低版本来进行尝试。如果我改用sideNav（），则会发生错误：

TypeError：$（...）。sideNav不是函数

Answer 1

要实现您要寻找的功能，我使用了jQuery 3.3.1。

修改了sidenav触发按钮，如下所示：

library(dplyr)

df %>%
  mutate(a_crit = as.integer(rowSums(.[a_items] >= 3) >= 1), 
         b_crit = as.integer(rowSums(.[b_items] >= 3) >= 2), 
         c_crit = as.integer(rowSums(.[c_items] >= 3) >= 3), 
         overal_crit = as.integer((a_crit + b_crit + c_crit) == 3))

#  a1 a2 b1 b2 b3 c1 c2 c3 c4 a_crit b_crit c_crit overal_crit
#1  3  2  2  1  3  3  4  3  1      1      0      1           0
#2  2  1  1  2  2  3  2  3  2      0      0      0           0
#3  2  3  5  1  3  1  3  4  3      1      1      1           1
#4  5  1  4  4  4  3  4  1  4      1      1      1           1

然后我initialized the sidenav就像医生说的那样：

<a href="#" data-target="slide-out" class="button-collapse sidenav-trigger show-on-large right">
   <i class="material-icons">menu</i>
</a>

现在可以使用了。

Answer 2

从开发人员给出的原始代码片段更改代码时，您犯了一些错误。以下是修复此问题的步骤：

将data-activates更改为data-target。 MaterializeCss使用此data属性来了解该按钮所指的导航。 data-activates并不意味着要实现。
将汉堡菜单的类别从button-collapse更改为sidenav-trigger。这是允许按钮打开导航栏的类，您无法使用自己喜欢的一种
将初始化Sidenav的目标元素从$('.button-collapse')更改为$('.sidenav')。您必须初始化导航栏，而不是按钮。

注意：您必须在运行代码段后单击完整页面才能看到它的运行状态...

这是因为您将汉堡菜单（由于类show-on-large而被放置在总是可见的内）放在了navbar-mobile元素（该元素被隐藏（关于中小屏幕尺寸）……不是所有的东西，而是移动的吗？也许您想要show-on-med-and-down助手？）。

我认为您应该更仔细地阅读文档，否则最终会混淆您的代码：/

希望我没有忘记任何东西：）

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Portfolio Blog</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</head>

<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">Tech Blog</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">About</a></li>
        <li><a href="#" data-target="slide-out" class="sidenav-trigger show-on-large right">
          <i class="material-icons">menu</i></a>
        </li>
      </ul>
      <!-- SIDENAV -->
      <ul id="slide-out" class="sidenav">
        <li>
          <div class="user-view">
            <div class="background">
              <img src="images/office.jpg">
            </div>
            <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
            <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
          </div>
        </li>
        <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
      </ul>
    </div>
  </nav>

  <h1>Index Page</h1>
  <script type="text/javascript">
    $(function() {
      $('.sidenav').sidenav();
    })
  </script>
</body>

</html>

侧面导航不适用于实现CSS

2 个答案: