Q&A
クリックした際に下の階層を表示できるドロップダウンメニューをつくりたいと思っています。
質問1
toggle()で表示非表示を切り替えてみたのですが、となりの子階層のborderまで表示されてしまいます。
また、なにもない領域をクリックできてしてしまうのを改善できないでしょうか。
質問2
クリックして子階層が表示された状態で、となりの項目(.list-item）をクリックするとその子階層を表示したいと思い、
each()を使ってみたのですが、今度はクリックしても子階層が閉じなくなってしまいました。どのようにすればよいでしょうか。
よろしくお願いします。
HTML
1<nav class="navigation"> 2 <ul> 3 <li class="list-item">ITEM１ 4 <div class="second-level"> 5 <a href="#">dummy</a> 6 <a href="#">dummy</a> 7 <a href="#">dummy</a> 8 </div> </li> 9 <li class="list-item">ITEM2 10 <div class="second-level"> 11 <a href="#">dummy</a> 12 <a href="#">dummy</a> 13 <a href="#">dummy</a> 14 </div> </li> 15 ～～～
CSS
1.navigation { 2 background: var(--pink); 3 border: 1px solid #aaa; 4 height: 40px; 5} 6.navigation > ul { 7 width: 800px; 8 margin: 0 auto; 9 text-align: center; 10 display: flex; 11 font-size: 1.6rem; 12 color: white; 13 justify-content: space-around; 14} 15.navigation .list-item { 16 display: inline-block; 17 line-height: 38px; 18 border-left: 1px solid #ccc; 19 padding-left: 20px; 20 cursor: pointer; 21} 22.list-item .second-level { 23 display: none; 24 background-color: #aaaaff; 25 margin: 0 -20px; 26} 27.second-level a { 28 display: block; 29}
jQuery
1$(function(){ 2 3var $naviItem = $('.navigation .list-item'); 4 5$naviItem.click(function(){ 6 7$naviItem.each(function(){ 8 $(this).find('.second-level').hide(); 9}); 10 11$(this).find('.second-level').toggle(); 12 13 14});
回答1件
0
あとで判りやすいかと思い
jQueryで簡単ドロップダウンメニュー
のコードを持ってきました。
ただ違うのはカーソルを<li>タグの上に持ってきたときに開いてたメニューを
質問者様の要望の通り<li>タグをクリックしたときに変えました
元になったサイトと比べればなにをしてるかはわかると思います。
javascript
1$(function(){ 2 $('.dropdwn li').on("click",function(){ 3 if($("ul", this).css('display') == "block"){ 4 // メニューを開く 5 $("ul.dropdwn_menu",this).slideUp(); 6 }else{ 7 // メニューを閉じる 8 $("ul:not(:animated)", this).slideDown(); 9 } 10 }); 11});
css
1.dropdwn{ 2 max-width: 1200px; 3 display: flex; 4} 5 6ul{ 7 text-align: center; 8 list-style-type: none; 9 margin: 0 auto; 10 padding: 0; 11 color: #fff; 12} 13li{ 14 max-width: calc(1200px/5); 15 position: relative; 16 padding: 5px; 17 display: block; 18 cursor: pointer; 19} 20 21.dropdwn>li{ 22 width: 1200px; 23 margin: 1px; 24 background: #7ba5ff; 25 display: inline; 26} 27 28.dropdwn_menu{ 29 width: 100%; 30 display: none; 31 position: absolute; 32 margin-left: -5px; 33 margin-top: 5px; 34 padding: 0; 35 background: rgb(75, 100, 209); 36} 37 38.dropdwn_menu li{ 39 width: 100%; 40} 41 42.dropdwn_menu li a{ 43 padding: 5px 0; 44 margin: -5px 5px -5px -5px; 45 display: block; 46 color: #fff; 47} 48 49li a:hover{ 50 background: #b3d7ff; 51 color: rgb(65, 65, 65); 52}
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8" /> 5<title>test</title> 6<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 7</head> 8<body> 9<ul class="dropdwn"> 10 <li>HOME</li> 11 <li>A 12 <ul class="dropdwn_menu"> 13 <li><a href="#">A1</a></li> 14 <li><a href="#">A2</a></li> 15 </ul> 16 </li> 17 <li>B 18 <ul class="dropdwn_menu"> 19 <li><a href="#">B1</a></li> 20 <li><a href="#">B2</a></li> 21 <li><a href="#">B3</a></li> 22 </ul> 23 </li> 24 <li>C 25 <ul class="dropdwn_menu"> 26 <li><a href="#">C1</a></li> 27 <li><a href="#">C2</a></li> 28 <li><a href="#">C3</a></li> 29 <li><a href="#">C4</a></li> 30 </ul> 31 </li> 32 <li>D 33 <ul class="dropdwn_menu"> 34 <li><a href="#">D1</a></li> 35 <li><a href="#">D2</a></li> 36 <li><a href="#">D3</a></li> 37 <li><a href="#">D4</a></li> 38 <li><a href="#">D5</a></li> 39 </ul> 40 </li> 41 </ul> 42</body> 43</html>
投稿2020/09/22 02:50
総合スコア2506
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/24 04:36
2020/09/24 08:28