Materialise v1.0.0 hide-on-med-and-down 在 chrome 中不起作用答案

【问题标题】：Materialize v1.0.0 hide-on-med-and-down not working in chromeMaterialise v1.0.0 hide-on-med-and-down 在 chrome 中不起作用
【发布时间】：2019-05-27 14:45:10
【问题描述】：

hide-on-med-and-down 在 firefox 68.0b1 和 safari 12.1 中运行良好，这意味着屏幕宽度 992px 时，按预期显示。由于此菜单以其他代码出现在 chrome 中，因此它似乎与 chrome 浏览器无关。

但仅在 chrome 上，当屏幕 > 992px 时，ul 的内容一直不显示！但与另一个

我已尝试将类 hide-on-med-and-down 替换为 show-on-large 但结果也出乎意料（ul 一直显示在小屏幕上）。

<nav class="teal">
    <div class="container">
      <div class="nav-wrapper">
       <a href="#home" class="brand-logo">AMV</a>
       <a href="#" data-target="mobile-nav" class="sidenav-trigger>
          <i class="material-icons">menu</i>
        </a>
        <ul class="right hide-on-med-and-down">
          <li>
            <a href="<?php echo URLROOT; ?>">Home</a>
          </li>
          <li>
            <a href="<?php echo URLROOT; ?>/pages/about">About</a>
          </li>
          <li>
            <a href="<?php echo URLROOT; ?>pages/contact">Contact</a>
          </li>
        </ul>
        </div>
    </div>
  </nav>


        <ul class="sidenav " id="mobile-nav">
          <li>
            <a href="<?php echo URLROOT; ?>">Home</a>
          </li>
          <li>
            <a href="<?php echo URLROOT; ?>/pages/about">About</a>
          </li>

          <li>
            <a href="<?php echo URLROOT; ?>/pages/contact">Contact</a>
          </li>
        </ul>


    <script type="text/javascript" src="js/materialize.js">
    $(document).ready(function(){
    $('.sidenav').sidenav();
    }); 
    </script>

【问题讨论】：

标签： google-chrome materialize

【解决方案1】：

问题与放大的屏幕有关，我不在乎这个参数。当我将缩放重置为 100% 时，菜单按预期显示。

【讨论】：

【解决方案2】：

那是因为您在 <a href="<?php echo URLROOT; ?>

中没有使用变量符号或双引号进行字符串减速你也错过了 class="sidenav-trigger> 中的双引号
所以如果你运行你的代码 sidevav 将不再工作

在您的 ul<a href="<?php echo URLROOT; ?> 标记中尝试Fixing /p>

例如。例子

<nav class="teal">
    <div class="container">
    <a href="#home" class="brand-logo right hide-on-med-and-down">AMV</a>
      <div class="nav-wrapper">

       <a href="#" data-target="mobile-nav" class="sidenav-trigger">
          <i class="material-icons">menu</i>
        </a>

        <ul class="right hide-on-med-and-down">
          <li>
            <a href="<?php echo "URLROOT"; ?>">Home</a>
          </li>
          <li>
            <a href="<?php echo "URLROOT"; ?>">About</a>
          </li>
          <li>
            <a href="<?php echo "URLROOT"; ?>">Contact</a>
          </li>
        </ul>

        </div>
    </div>
  </nav>

  <ul class="sidenav " id="mobile-nav">
          <li>
            <a href="<?php echo "URLROOT"; ?>">Home</a>
          </li>
          <li>
            <a href="<?php echo "URLROOT"; ?>/pages/about">About</a>
          </li>

          <li>
            <a href="<?php echo "URLROOT"; ?>/pages/contact">Contact</a>
          </li>
        </ul>


    <script type="text/javascript" src="js/materialize.js">
    $(document).ready(function(){
    $('.sidenav').sidenav();
    }); 
    </script>

【讨论】：