作成したドロップダウンメニュー内にて、第二階層のリンクが動作しません。

前提・実現したいこと

前回作成したドロップダウンメニューを正常に動作させたいです。

完成形として、ドロップダウンメニューの第一階層はリンクである必要はありません。

拾い物のコードのことで何度もお伺いして済みません。
原因に思い当たる方、ご教示頂けますと幸いです。

発生している問題・エラーメッセージ

第二階層のリンクがうまく動作しません。

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4
5<meta http-equiv="Content-Language" content="ja">
6<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
7<meta http-equiv="Content-Script-Type" content="text/javascript">
8
9<title>タイトル</title>
10<link href="css/dropdown.css" rel="stylesheet" type="text/css">
11</head>
12<body>
13<nav role="navigation" class="nav">
14    <ul class="nav-items">
15        <li class="nav-item">
16            <a href="#" class="nav-link"><span>Home</span></a>
17        </li> 
18        <li class="nav-item dropdown">
19            <a href="#" class="nav-link"><span>Products</span></a>
20            <nav class="submenu">
21                <ul class="submenu-items">
22                    <li class="submenu-item"><a href="https://www.google.co.jp/" class="submenu-link">Product #1</a></li>
23                    <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
24                    <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
25                </ul>
26            </nav>
27        </li> 
28        <li class="nav-item">
29            <a href="#" class="nav-link"><span>Services</span></a>
30        </li>
31        <li class="nav-item">
32            <a href="#" class="nav-link"><span>Pricing</span></a>
33        </li> 
34        <li class="nav-item">
35            <a href="#" class="nav-link"><span>News</span></a>
36        </li>
37        <li class="nav-item dropdown">
38            <a href="#" class="nav-link"><span>More</span></a>
39            <nav class="submenu">
40                <ul class="submenu-items">
41                    <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
42                    <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
43                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
44                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
45                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
46                    <li class="submenu-item"><a href="#" class="submenu-link">Careers</a></li>
47                </ul>
48            </nav>
49        </li>  
50    </ul>
51</nav>
52<script src="js/dropdown.js"></script>
53</body>
54</html>

CSS
1/* Page */
2
3html {
4    box-sizing: border-box;
5}
6
7*, 
8*:before, 
9*:after {
10    box-sizing: inherit;
11}
12
13.nav {
14    width: 100%;
15    margin: 0 auto 0 auto;
16    text-align: center;
17}
18
19/* Navigation */
20
21.nav {
22    font-family: Georgia, Arial, sans-serif;
23    font-size: 14px;
24}
25
26.nav-items {
27    padding: 0;
28    list-style: none;
29}
30
31.nav-item {
32    display: inline-block;
33    margin-right: 25px;
34    width: 23%;
35}
36
37.nav-item:last-child {
38    margin-right: 0;
39}
40
41.nav-link,
42.nav-link:link, 
43.nav-link:visited, 
44.nav-link:active,
45.submenu-link,
46.submenu-link:link, 
47.submenu-link:visited, 
48.submenu-link:active {
49    display: block;
50    position: relative;
51    font-size: 14px;
52    letter-spacing: 1px;
53    cursor: pointer;
54    text-decoration: none;
55    outline: none;
56    border-left: 1px solid #fff;
57}
58
59.nav-link,
60.nav-link:link, 
61.nav-link:visited, 
62.nav-link:active {
63    color: #000;
64    font-weight: bold;
65}
66
67.nav-link::before {
68    content: "";
69    position: absolute;
70    top: 100%;
71    left: 0;
72    width: 280px;
73    height: 3px;
74    background: rgba(0,0,0,0.2);
75    opacity: 0;
76    -webkit-transform: translate(0, 10px);
77    transform: translate(0, 10px);
78    transition: opacity 0.3s ease, transform 0.3s ease;
79}
80
81.nav-link:hover::before,
82.nav-link:hover::before {
83    opacity: 1;
84    -webkit-transform: translate(0, 5px);
85    transform: translate(0, 5px);
86}
87
88.dropdown {
89    position: relative;
90}
91
92.dropdown .nav-link {
93    padding-right: 15px;
94    height: 17px;
95    line-height: 1.1;
96}
97
98.dropdown .nav-link::after {
99    content: "";
100    position:absolute;
101    top: 6px;
102    right: 0;
103    border: 5px solid transparent;
104    border-top-color: #bbb;
105}
106
107.submenu {
108    position: absolute;
109    top: 100%;
110    left: 50%;
111    z-index: 100;
112    width: 600px;
113    margin-left: -300px;
114    background: #FFF;
115    border-radius: 3px;
116    line-height: 1.46667;
117    margin-top: -5px;
118    box-shadow: 0 0 8px rgba(0,0,0,.3);
119    opacity:0;
120    -webkit-transform: translate(0, 0) scale(.85);
121    transform: translate(0, 0)scale(.85);
122    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
123    pointer-events: none;
124}
125
126.submenu::after, 
127.submenu::before {
128    content: ""; 
129    position: absolute;
130    bottom: 100%;
131    left: 50%;
132    margin-left: -10px;
133    border: 10px solid transparent;
134    height: 0;
135}
136
137.submenu::after {
138    border-bottom-color: #fff;
139}
140
141.submenu::before {
142    margin-left: -13px;
143    border: 13px solid transparent;
144    border-bottom-color: rgba(0,0,0,.1);
145    -webkit-filter:blur(1px);
146    filter:blur(1px);
147}
148
149.submenu-items {
150    list-style: none;
151    padding: 10px 0;
152}
153
154.submenu-item {
155    display: block;
156    text-align: left;
157}
158
159.submenu-link,
160.submenu-link:link, 
161.submenu-link:visited, 
162.submenu-link:active {
163    color: #000;
164    padding: 10px 20px;
165}
166
167.submenu-link:hover {
168    text-decoration: underline;
169}
170
171.submenu-seperator {
172    height: 0;
173    margin: 12px 10px;
174    border-top: 1px solid #eee;
175}
176
177.show-submenu .submenu {
178    opacity: 1;
179    -webkit-transform: translate(0, 25px) scale(1);
180    transform: translate(0, 25px) scale(1);
181    pointer-events: auto;
182}
183
184li.nav-item ul.submenu-items {
185    position: absolute;
186    left: 0;
187    box-sizing: border-box;
188    width: 800px;
189    padding: 20px 2%;
190    background: #fff;
191    -webkit-transition: all .2s ease;
192    transition: all .2s ease;
193}
194
195li.nav-item:hover ul.submenu-items {
196    visibility: visible;
197    opacity: 1;
198}
199
200li.nav-item ul.submenu-items > li {
201    float: left;
202    width: 32%;
203    border: none;
204}
205
206li.nav-item ul.submenu-items > li:nth-child(3n+2) {
207    margin: 0 1%;
208}
209
210

JavaScript
1[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
2    el.addEventListener('click', onClick, false);
3});
4
5function onClick(e){
6    e.preventDefault();
7    var el = this.parentNode;
8    el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
9}
10
11function showSubMenu(el){
12    el.classList.add('show-submenu');
13    document.addEventListener('click', function onDocClick(e){
14        e.preventDefault();
15        if(el.contains(e.target)){
16            return;
17        }
18        document.removeEventListener('click', onDocClick);
19        hideSubMenu(el);
20    });
21}
22
23function hideSubMenu(el){
24    el.classList.remove('show-submenu');
25}

試したこと

第一階層にリンクをつけましたが同じでした。

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

回答1件

ベストアンサー

showSubMenu()の中ですべての要素に対してpreventDefault()を適用してしまっているのが原因のようです。
document.addEventListener('click',... 以下はすべて不要かもしれません。

JavaScript
1function showSubMenu(el){
2    let shown = document.getElementsByClassName('show-submenu');
3
4    if (shown.length) {
5        for (let i = 0; i < shown.length; i ++) {
6            shown[i].classList.remove('show-submenu');
7        }
8    }
9    /* 以上、他の開いているメニューを隠すスクリプト */
10
11    el.classList.add('show-submenu');
12}