Materialize CSS coverTrigger 属性不起作用

Question

我想用 materialize css 构建一个网页。因此，我在页面顶部有一个导航栏。我想包括一个语言选择下拉菜单。我使用的代码：

html:

<!-- top navbar -->
<header>
  <nav>
    <div class="nav-wrapper blue darken-3">
      <a href="index.html"><img src="img/logo.png" id="appicon" style="vertical-align: middle; margin-bottom: 15px; margin-left: 10px;" width="50" alt="logo"></a>
      <span class="center-align hide-on-small-only" style="font-size: 25px; margin-left: 10px;">
        Title
      </span>
      <a href="index.html" data-target="sidebar" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="index.html" style="font-size: 18px">Home</a></li>
        <li><a href="statistics.html" style="font-size: 18px">Stats</a></li>
        <li class="active"><a href="tutorials.html" style="font-size: 18px">Tutorials</a></li>
        <li><a href="contact.html" style="font-size: 18px">Contact</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdownLanguage"><i class="material-icons right">translate</i></a></li>
      </ul>
    </div>
  </nav>
</header>

<!-- Dropdown Structure -->
<ul id="dropdownLanguage" class="dropdown-content">
  <li class="active"><a href="#!">German&emsp;<i class="material-icons right">check</i></a></li>
  <li><a href="tutorials_en.html">English</a></li>
</ul>

jQuery:

(function($){
  $(function(){

    $('.sidenav').sidenav();

    $(document).ready(function(){

      /* Activate dropdown menu */
      $(".dropdown-trigger").dropdown({
        constrainWidth: false,
        // coverTrigger: false
        belowOrigin: true
      });

    });

  }); // end of document ready
})(jQuery);

css:

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

我遇到的问题是下拉语言菜单不会在触发器下方打开。我尝试了 jQuery 选项 'belowOrigin' 以及 'coverTrigger'。无论我使用哪两个，下拉菜单都不会在触发源以下打开。（在 Firefox 和 Chrome 中测试过。）

有人知道我可以尝试什么或有什么问题吗？

Answer 1

我现在明白了。下拉结构需要一个字符来“找到”触发器的位置。我使用的图标还不够。插入任何文本都有帮助。因为我不想有任何文本，所以我选择了一个小空格 (&hairsp;)。

有问题的行现在看起来像这样：

<li><a class="dropdown-trigger" href="#!" data-target="dropdownLanguage1">&hairsp;<i class="material-icons right">translate</i></a></li>

也许这对某人有帮助。

最佳

Materialize CSS coverTrigger 属性不起作用

Materialize CSS coverTrigger attribute is not working

html

css

jquery

materialize