Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

jQueryを勉強中で以下のコードがしっくりこないです。
マウスカーソルをhoverさせると、下層メニューが展開される。。。というコードを勉強中なのですが。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Lesson09</title>
6<link rel="stylesheet" href="css/reset.css">
7<link rel="stylesheet" href="css/style.css">
8<script src="js/jquery-2.1.4.min.js"></script>
9<script src="js/script.js"></script>
10</head>
11<body>
12<div id="wrapper">
13  <header>
14    <h1>Dropdown Menu</h1>
15  </header>
16  <nav>
17    <ul id="navi">
18      <li><a href="#">Menu1</a>
19        <ul>
20          <li><a href="#">Menu1a</a></li>
21          <li><a href="#">Menu1b</a></li>
22          <li><a href="#">Menu1c</a></li>
23        </ul>
24      </li>
25      <li><a href="#">Menu2</a>
26        <ul>
27          <li><a href="#">Menu2a</a></li>
28          <li><a href="#">Menu2b</a></li>
29          <li><a href="#">Menu2c</a></li>
30        </ul>
31      </li>
32      <li><a href="#">Menu3</a>
33        <ul>
34          <li><a href="#">Menu3a</a></li>
35          <li><a href="#">Menu3b</a></li>
36          <li><a href="#">Menu3c</a></li>
37        </ul>
38      </li>
39      <li><a href="#">Menu4</a>
40        <ul>
41          <li><a href="#">Menu4a</a></li>
42          <li><a href="#">Menu4b</a></li>
43          <li><a href="#">Menu4c</a></li>
44        </ul>
45      </li>
46    </ul>
47  </nav>
48  <main>
49    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
50    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
51    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
52  </main>
53</div>
54</body>
55</html>
56

css
1@charset "UTF-8";
2
3body{
4	font-family:Arial, sans-serif;
5	-webkit-font-smoothing:antialiased;
6	background:#FDC825;
7}
8
9#wrapper{
10	width:1000px;
11	margin:0 auto;
12	background:#FFF;
13}
14
15header h1{
16	padding:80px 25px;
17	color:#FDC825;
18	background:#526563;
19	font-size:4em;
20	font-weight:bold;
21}
22
23li{
24	float:left;
25	width:250px;
26	text-align:center;
27	list-style-type:none;
28	font-weight:bold;
29}
30
31ul ul{
32	display:none;
33	position:absolute;
34	width:250px;
35}
36
37li li{
38	float:none;
39	border-top:1px solid #7F9492;
40}
41
42li a{
43	display:block;
44	padding:20px 0;
45	color:#FDC825;
46	background:#3F5250;
47	border-right:1px solid #526563;
48	text-decoration:none;
49}
50
51li a:hover{
52	color:#FFF;
53	background:#394C4A;
54}
55
56#navi > li:last-child > a, nav li:last-child li a{
57	border-right:none;
58}
59
60main{
61	clear:both;
62	display:block;
63	padding:50px 25px 20px;
64}
65
66p{
67	margin-bottom:50px;
68	line-height:2em;
69	color:#394C4A;
70}
71

jQuery
1$(function(){
2	$("#navi")children("li").hover(function(){
3		$(this).children("ul").stop()slideToggle(100);
4	}):
5
6});

jQuery部分の
$("#navi")children("li")はなんで「li」を指定するのでしょうか？
li内にあるaタグで指定するとhoverが反応しないのはなぜなのでしょうか？

なぜこんなことを疑問に思ったかというと、
他コードclickメソッドを勉強中に、

clickメソッドの時は同じような

<li><a href="#">Menu1</a> といったようなコードがあった時に $(”a”).click(function(){'}))といったようなaタグをクリックして作動させているからです。クリックメソッドの時はaタグにして、ホバーの時はなぜli要素に指定するのかがいまいちわかりません。

ちなみにその時のコードは

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Lesson07</title>
6<link rel="stylesheet" href="css/reset.css">
7<link rel="stylesheet" href="css/style.css">
8<script src="js/jquery-2.1.4.min.js"></script>
9<script src="js/script.js"></script>
10</head>
11<body>
12<header>
13  <h1>Viewer</h1>
14</header>
15<main>
16  <figure><img src="img/img1.jpg" width="640" height="400" alt="Photo"></figure>
17  <ul>
18    <li><a href="img/img1.jpg"><img src="img/thumb1.jpg" width="80" height="50" alt="Photo1"></a></li>
19    <li><a href="img/img2.jpg"><img src="img/thumb2.jpg" width="80" height="50" alt="Photo2"></a></li>
20    <li><a href="img/img3.jpg"><img src="img/thumb3.jpg" width="80" height="50" alt="Photo3"></a></li>
21  </ul>
22</main>
23</body>
24</html>

jQuery
1$(function(){
2	$("a").click(function(){
3		$("figure img").attr("src",$(this).attr("href"));
4		return false;
5	});
6
7
8});

拙い説明で申し訳ないのですが教えていただけると幸いです。

yambejp

2024/08/09 10:13

コードがだいぶ間違っています。正しく転記しないと質問に対する回答がぶれますよ

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

回答1件

$("#navi").children("li")はなんで「li」を指定するのでしょうか？

表示されているのがid=navの中にあるliのテキスト部分にマウスを反応させるからですね

li内にあるaタグで指定するとhoverが反応しないのはなぜなのでしょうか？

childrenは要素の直下の要素を取ります。ul要素の直下にはliタグしかないのでaは反応しません。
また仮に反応したとしてもaの中にulがないのでaにhoverしてもulは操作できません

参考

aを基軸に処理したいならこう

javascript
1$(function(){
2  $("#navi > li > a").hover(function(){
3    $(this).closest('li').children("ul").stop().slideToggle(100);
4  });
5});

「#nav」直下のli直下のaのhoverで、aの自分を含む上位の近接するliのulにスライド処理します

投稿2024/08/09 10:36

編集2024/08/09 10:45

yambejp

総合スコア118162

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

Dropdown Menu

Viewer

jQueryのhoverでの疑問

参考

関連した質問