Materializeのsidenav機能におけるdropdownが機能しない

##状況
現在、Materialize公式のsidenavを導入し、サイドメニューの中にdropdown機能を追加しようとしています。
sidenav自体はiconをクリックすると左から出てくるような形で、
dropdownメニューは、そのsidenavの中にあり、クリックするとdropdownされるという形式にしています。

以下は実際にsidenavが展開しているところです。

以下が、そのコードとなります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Materialize_sample</title>
6    <!-- Compiled and minified CSS -->
7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
8    <!-- Compiled and minified JavaScript -->
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
10    <!--Import Google Icon Font-->
11    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12</head>
13<body>
14    <ul id="slide-out" class="sidenav">
15      <li><a href="#!">First Sidebar Link</a></li>
16      <li><a href="#!">Second Sidebar Link</a></li>
17      <li class="no-padding">
18        <ul class="collapsible collapsible-accordion">
19          <li>
20            <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
21            <div class="collapsible-body">
22              <ul>
23                <li><a href="#!">First</a></li>
24                <li><a href="#!">Second</a></li>
25                <li><a href="#!">Third</a></li>
26                <li><a href="#!">Fourth</a></li>
27              </ul>
28            </div>
29          </li>
30        </ul>
31      </li>
32    </ul>
33    <ul class="right hide-on-med-and-down">
34      <li><a href="#!">First Sidebar Link</a></li>
35      <li><a href="#!">Second Sidebar Link</a></li>
36      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
37      <ul id='dropdown1' class='dropdown-content'>
38        <li><a href="#!">First</a></li>
39        <li><a href="#!">Second</a></li>
40        <li><a href="#!">Third</a></li>
41        <li><a href="#!">Fourth</a></li>
42      </ul>
43    </ul>
44    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
45    
46<script>
47  document.addEventListener('DOMContentLoaded', function() {
48    var elems = document.querySelectorAll('.sidenav');
49    var instances = M.Sidenav.init(elems, {});
50  });
51</script>
52</body>
53</html>

##現状
現状としては、
・sidenavは展開する
・dropdownの文字をクリックしてもdropdown-contentが出てこない
という状況です。

developer toolを確認しましたが、エラーは出ておりませんでした。

以下のリンクを参考にしましたが分かりませんでした。
https://stackoverflow.com/questions/35951350/materialize-dropdown-and-sidenav-doesnt-work
http://umetyuu.hatenablog.com/entry/2015/04/27/183917

どのようにすればdropdownが機能するでしょうか。
教えていただきますよう、よろしくお願いいたします。

行動規範の内容に同意します

回答2件

html
1
2          <li>
3            <a class="collapsible-header" data-target="collapsible-data">Dropdown<i class="material-icons">arrow_drop_down</i></a>
4            <div class="collapsible-body" id="collapsible-data">
5              <ul>
6                <li><a href="#!">First</a></li>
7                <li><a href="#!">Second</a></li>
8                <li><a href="#!">Third</a></li>
9                <li><a href="#!">Fourth</a></li>
10              </ul>
11            </div>
12          </li>

javascript
1  document.addEventListener('DOMContentLoaded', function() {
2    var elems = document.querySelectorAll('.sidenav');
3    var instances = M.Sidenav.init(elems, {});
4     var drop = document.querySelectorAll('.dropdown-trigger');
5    var drop_instances = M.Dropdown.init(drop, {});
6     var drop_in_nav = document.querySelectorAll('.collapsible-header');
7    var drop_instances = M.Dropdown.init(drop_in_nav, {});
8  });
9