Q&A
ul li要素の中にdivを作っていたので、いちおう子要素にはなっていたかと思うのですが、そもそもul要素の中にdiv要素を入れるのが問題ありだったようなので、divの使用をやめることにしました。コメントありがとうございました！
###前提・実現したいこと
jQueryを使って、リストhover時にネストされたリストを表示するようにしたい。
###発生している問題・エラーメッセージ
試作したコードで思ったように動作しない。
###該当のソースコード
html
1<ul> 2 <li>1</li> 3 <div class="sublist"> 4 <ul> 5 <li>1</li> 6 <li>2</li> 7 </ul> 8 </div> 9 <li>2</li> 10</ul>
css
1.sublist{ 2 left:-9999px; 3 position:absolute; 4} 5 6li.current div{ 7 left:40px; 8}
jQuery
1$('li').hover( 2function(){$(this).addClass('current');}, 3function(){$(this).removeClass('current');} 4);
回答2件
0
ベストアンサー
div要素はul要素の子要素として使用してはいけません。
質問者さんが行いたいことはこのような動作でしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 li > ul { 8 display: none; 9 } 10 11 .show { 12 display: block; 13 } 14 </style> 15</head> 16<body> 17<ul> 18 <li>1 19 <ul> 20 <li>1</li> 21 <li>2</li> 22 </ul> 23 </li> 24 <li>2</li> 25</ul> 26<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 27<script> 28 $("ul li").hover(function () { 29 $(this).children("ul").addClass("show"); 30 }, function () { 31 $(this).children("ul").removeClass("show"); 32 }); 33</script> 34</body> 35</html>
投稿2017/04/01 16:21
総合スコア14731
0
liにpositionは、つけていらっしゃいますよね？
divはliの子要素になっていないような。
投稿2017/04/01 16:18
総合スコア128
解決してよかったですね！
実に余談ですが、hoverしたときは下記なので、なってないですよ
◇今のコードだとこうなるので、子要素ではないですね
<ul>
<li class="current">1</li>
<div class="sublist">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<li>2</li>
</ul>
◇書き方に問題あるようですが、下記だと子要素です
<ul>
<li class="current">1
<div class="sublist">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</li>
<li>2</li>
</ul>
あああ！すごい目から鱗でした！うまくいかない根本原因は、ご指定頂いた「子要素の仕組み」の誤解でした。実は、、、本当にやりたいことの解決はできてなかったのですが、補足頂いたおかげで壁を突破できました。ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/02 09:34