ハンバーガーメニューをクリックしてもドロップダウンメニューが出てこない。

発生している問題

ハンバーガーメニューをクリックしてもドロップダウンメニューが出てこない状態で詰まっています。
検証画面で確認すると、slideToggle()でエラーとなり動きません。
試しにslideDown()でも確認してみましたが、同じくエラーとなります。
環境はDockerで作りました。

アドバイスのほどよろしくお願いします。
また、質問内容で足りない部分もありましたらコメントください。

エラー発生時のコンソール画面

ソースコード

JavaScript
1$(function(){
2    $('.toggle-menu').on('click',function() {
3        //ここの部分でエラーとなります
4        $('.toggle-filter').slideToggle();
5
6        $(document).on('click',function(e){
7            if(!$(e.target).closest('.toggle-menu').length){
8                $('.toggle-filter').slideUp();
9            }
10        });
11    });
12    $(window).resize(function(){
13        var windowWidth = $(window).width();
14        var breakPoint = 960;
15        if(windowWidth >= breakPoint){
16            $('.toggle-filter').hide();
17        };    
18    });
19
20});

HTML
1     <header>
2       <a class="logo-link" href="#"><img class="logo" src="" alt="ロゴ"></a>
3        <ul class="nav">
4            <li><a href="#">aaa</a></li>
5            <li><a href="#">bbb</a></li>
6            <li><a href="#">ccc</a></li>
7            <li><a href="#">ddd</a></li>
8        </ul>
9
10        <!-- ハンバーガーメニュー -->
11        <div class="toggle-menu">
12            <ul class="toggle-bar">
13                <li></li>
14                <li></li>
15                <li></li>
16            </ul>
17        </div>
18        <!-- ハンバーガーメニュー -->
19
20
21    </header>
22
23    <!-- ドロップダウンメニュー -->
24    <div class="toggle-filter">
25        <ul class="filter-menu">
26            <li><a href="#">aaa</a></li>
27            <li><a href="#">bbb</a></li>
28            <li><a href="#">ccc</a></li>
29            <li><a href="#">ddd</a></li>
30        </ul>
31        <div class="close"><span></span></div>
32    </div>
33    <!-- ドロップダウンメニュー -->
34　　
35　　<!-- jsファイル読み込み -->
36    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
37    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
38    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
39    <script src="../assets/js/script.js"></script>
40
41
42

css
1.toggle-menu {
2        display: block;
3        width: 40px;
4        height: 40px;
5        padding: 5px;
6        border: solid 2px #D92729;
7        box-sizing: border-box;
8        display: flex;
9        justify-content: center;
10        align-items: center;
11    }
12    .toggle-bar > li{
13        width: 30px;
14        height: 3px;
15        background-color: #D92729;
16        list-style: none;
17    }
18    .toggle-bar > li:nth-child(2) {
19        margin: 5px 0;
20    }
21    .toggle-filter {
22        display: none;
23        width: 100%;
24        height: 100%;
25        padding: 150px 0;
26        font-size: 20px;
27        text-align: center;
28        background-color: #D92729;
29        position: fixed;
30        top: 0;
31        z-index: 10;
32    }
33    .filter-menu {
34        display: block;
35        list-style: none;
36    }
37    .filter-menu > li {
38        margin-bottom: 40px;
39        letter-spacing: 7px;
40    }
41    .filter-menu > li:last-child {
42        margin-bottom: 0;
43    }
44    .filter-menu > li a {
45        color: #fff;
46    }
47    .close {
48        display: inline-block;
49        width: 40px;
50        height: 40px;
51        position: relative;
52      }
53      .close span::before,
54      .close span::after {
55        display: block;
56        content: "";
57        position: absolute;
58        text-align: center;
59        top: 250%;
60        width: 40px;
61        height: 3px;
62        background: #fff;
63      }
64      .close span::before {
65        transform: rotate(-45deg);
66      }
67      .close span::after {
68        transform: rotate(45deg);
69      }

退会済みユーザー

2019/10/17 03:52 編集

記載して頂いているコードをそのまま動かしましたが、私の環境では正常に動作しました。以下2点追記していただけると回答しやすいです。 ①jsファイルはご自身で記載されたファイルとjQueryを読み込んでいると思いますが読み込む順番はどうなっているでしょうか？ ②押した際のエラーメッセージのキャプチャを載せてもらえますか？

ysmd

2019/10/17 04:53

コメントありがとうございます。 ①、②について追記しました。ご確認よろしくお願いします。

退会済みユーザー

2019/10/17 05:17

うまくjQueryでオブジェクトが取得できていないようです。（ただ、やはり私の環境ではjsの読み込みを同じ物にしましたが正常に動作しています）コンソールで直接 $('.toggle-filter') と打った場合、ちゃんと該当の要素がコンソールに表示されるでしょうか？（もし既に回答の通りに実施し、解決した場合は無視して大丈夫です）

ysmd

2019/10/17 05:50

解決できました。どうやらjsを読み込む際のファイルのバージョンの問題でした。

退会済みユーザー

2019/10/17 06:03

よかったです。jQueryのSlim版ではエラーが起きたメソッドがサポートされていないみたいですね。 https://www.anothersky.pw/2016/06/jquery_3_slimbuild_hint.html

ysmd

2019/10/17 07:29

こういう仕様だったんですね。すごく腑に落ちました。

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

回答1件

ベストアンサー

click処理の中のclickとかちょっと微妙ですが今のままでも
ハンバーガーメニューとしては機能しています。

とりあえず

外部ファイルはやめて直書き
全角のスペースやクォーテーションが混ざってないことを確認

などですこしずつ検証していくことですね
以下全部直書きしたもの、コピペして試してみてください

javascript
1<style>
2.toggle-menu {
3display: block;
4width: 40px;
5height: 40px;
6padding: 5px;
7border: solid 2px #D92729;
8box-sizing: border-box;
9display: flex;
10justify-content: center;
11align-items: center;
12}
13.toggle-bar > li{
14width: 30px;
15height: 3px;
16background-color: #D92729;
17list-style: none;
18}
19.toggle-bar > li:nth-child(2) {
20margin: 5px 0;
21}
22.toggle-filter {
23display: none;
24width: 100%;
25height: 100%;
26padding: 150px 0;
27font-size: 20px;
28text-align: center;
29background-color: #D92729;
30position: fixed;
31top: 0;
32z-index: 10;
33}
34.filter-menu {
35display: block;
36list-style: none;
37}
38.filter-menu > li {
39margin-bottom: 40px;
40letter-spacing: 7px;
41}
42.filter-menu > li:last-child {
43margin-bottom: 0;
44}
45.filter-menu > li a {
46color: #fff;
47}
48.close {
49display: inline-block;
50width: 40px;
51height: 40px;
52position: relative;
53}
54.close span::before,
55.close span::after {
56display: block;
57content: "";
58position: absolute;
59text-align: center;
60top: 250%;
61width: 40px;
62height: 3px;
63background: #fff;
64}
65.close span::before {
66transform: rotate(-45deg);
67}
68.close span::after {
69transform: rotate(45deg);
70}
71</style>
72<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
73<script>
74$(function(){
75  $('.toggle-menu').on('click',function() {
76    $('.toggle-filter').slideToggle();
77    $(document).on('click',function(e){
78      if(!$(e.target).closest('.toggle-menu').length){
79        $('.toggle-filter').slideUp();
80      }
81    });
82  });
83  $(window).resize(function(){
84    var windowWidth = $(window).width();
85    var breakPoint = 960;
86    if(windowWidth >= breakPoint){
87      $('.toggle-filter').hide();
88    };    
89  });
90});
91</script>
92
93<header>
94<a class="logo-link" href="#"><img class="logo" src="" alt="ロゴ"></a>
95<ul class="nav">
96<li><a href="#">aaa</a></li>
97<li><a href="#">bbb</a></li>
98<li><a href="#">ccc</a></li>
99<li><a href="#">ddd</a></li>
100</ul>
101<div class="toggle-menu">
102<ul class="toggle-bar">
103<li></li>
104<li></li>
105<li></li>
106</ul>
107</div>
108</header>
109<div class="toggle-filter">
110<ul class="filter-menu">
111<li><a href="#">aaa</a></li>
112<li><a href="#">bbb</a></li>
113<li><a href="#">ccc</a></li>
114<li><a href="#">ddd</a></li>
115</ul>
116<div class="close"><span></span></div>
117</div>
118