質問編集履歴

1

全コードを追加投稿しました

2021/02/14 09:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,106 @@
16
16
 
17
17
 
18
18
 
19
+ ```ここに言語を入力
20
+
21
+ <!DOCTYPE html>
22
+
23
+ <html lang="ja">
24
+
25
+ <head>
26
+
27
+ <meta charset="UTF-8">
28
+
29
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
30
+
31
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
32
+
33
+ <link rel="stylesheet" href="stylesheet.css">
34
+
35
+ <title>Document</title>
36
+
37
+ </head>
38
+
39
+ <body>
40
+
41
+ <nav>
42
+
43
+ <ul id="navi">
44
+
45
+ <li><a href="#">Menu1</a>
46
+
47
+ <ul>
48
+
49
+ <li><a href="#">Menu1-a</a></li>
50
+
51
+ <li><a href="#">Menu1-b</a></li>
52
+
53
+ <li><a href="#">Menu1-c</a></li>
54
+
55
+ </ul>
56
+
57
+ </li>
58
+
59
+ <li><a href="#">Menu2</a>
60
+
61
+ <ul>
62
+
63
+ <li><a href="#">Menu2-a</a></li>
64
+
65
+ <li><a href="#">Menu2-b</a></li>
66
+
67
+ <li><a href="#">Menu2-c</a></li>
68
+
69
+ </ul>
70
+
71
+ </li>
72
+
73
+ </ul>
74
+
75
+ </nav>
76
+
77
+
78
+
79
+
80
+
81
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
82
+
83
+ // $(function(){
84
+
85
+ // $("#navi").children("li").hover(function() {
86
+
87
+ // $(this).children("ul").stop().slideToggle(100);
88
+
89
+ // });
90
+
91
+ // });
92
+
93
+ $(function(){
94
+
95
+ // #navi直下のli要素をマウスオーバー
96
+
97
+ $("#navi").children("li").hover(function(){
98
+
99
+ // 下層ナビゲーションの表示を切り替える
100
+
101
+ $(this).children("ul").stop().slideToggle(100);
102
+
103
+ });
104
+
105
+ });
106
+
107
+ </script>
108
+
109
+ </body>
110
+
111
+ </html>
112
+
113
+ ```
114
+
115
+
116
+
117
+
118
+
19
119
  ### 試したこと
20
120
 
21
121
  - chromeデベロッパーツールのコンソールでのエラー表示なし