ドロップダウンメニューをjqueryで作成したのですが、いざ開いたメニューをクリックしようとすると、
ホバー判定が外れて閉じてしまいます。
問題なくメニューをクリックできるようにしたいです。
何日も詰まっており、ご教授お願いできませんでしょうか。
jquery
1$('.p-nav__sub').hide(); 2 3$('.p-nav__list').hover(function() { 4 5$(".p-nav__sub:not(:animated)", this).slideDown(); 6 7}, function() { 8 9$(".p-nav__sub",this).slideUp(); 10});
html
1 <header class="l-header"> 2 <div class="l-header__container"> 3 <a href=""><img class="l-header__logo" src="./assets/images/icon1.png" alt="会社ロゴ" ></a> 4 <nav class="p-nav"> 5 <ul class="p-nav__menu"> 6 <li class="p-nav__list"> 7 <a href="" class="p-nav__button">MENS</a> 8 <ul class="p-nav__sub"> 9 <div class="p-nav__container"> 10 <li><a href="">MENSTOP</a></li> 11 <li>BRAND</li> 12 <li><a href="">ブランドを選択する</a></li> 13 <li>CATEGORY</li> 14 </div> 15 <div class="p-nav__container"> 16 <li><a href="">トップス</a></li> 17 <li><a href="">アウター</a></li> 18 <li><a href="">パンツ</a></li> 19 </div> 20 <div class="p-nav__container"> 21 <li><a href="">オールインワン</a></li> 22 <li><a href="">スーツ</a></li> 23 <li><a href="">バッグ</a></li> 24 </div> 25 <div class="p-nav__container"> 26 <li><a href="">シューズ</a></li> 27 <li><a href="">小物</a></li> 28 <li><a href="">アクセサリー</a></li> 29 </div> 30 <div class="p-nav__container"> 31 <li><a href="">アンダーウェア</a></li> 32 <li><a href="">レッグウェア</a></li> 33 <li><a href="">帽子</a></li> 34 </div> 35 </ul> 36 </li> 37 <li class="p-nav__list"> 38 <a href="" class="p-nav__button" id="p-nav__botton2">WOMENS</a> 39 <ul class="p-nav__sub"> 40 <div class="p-nav__container"> 41 <li><a href="">WOMENSTOP</a></li> 42 <li>BRAND</li> 43 <li><a href="">ブランドを選択する</a></li> 44 <li>CATEGORY</li> 45 </div> 46 <div class="p-nav__container"> 47 <li><a href="">トップス</a></li> 48 <li><a href="">アウター</a></li> 49 <li><a href="">パンツ</a></li> 50 </div> 51 <div class="p-nav__container"> 52 <li><a href="">オールインワン</a></li> 53 <li><a href="">スーツ</a></li> 54 <li><a href="">バッグ</a></li> 55 </div> 56 <div class="p-nav__container"> 57 <li><a href="">シューズ</a></li> 58 <li><a href="">小物</a></li> 59 <li><a href="">アクセサリー</a></li> 60 </div> 61 <div class="p-nav__container"> 62 <li><a href="">アンダーウェア</a></li> 63 <li><a href="">レッグウェア</a></li> 64 <li><a href="">帽子</a></li> 65 </div> 66 </ul> 67 </li> 68 <li class="p-nav__list"> 69 <a href="" class="p-nav__button" id="p-nav__botton3">SHOP LIST</a> 70 </li> 71 </ul> 72 </nav> 73 <div class="p-keyword"> 74 <input class="p-keyword__search" type="search" placeholder="何かお探しですか"> 75 <ul class="p-keyword__container"> 76 <li class="p-keyword__list"> 77 <a href=""><img class="p-keyword__glasses" src="./assets/images/icon2.png" alt="虫眼鏡"></a> 78 </li> 79 <li class="p-keyword__list"> 80 <a href=""><img class="p-keyword__cart" src="./assets/images/icon3.png" alt="虫眼鏡"></a> 81 </li> 82 </ul> 83 <a href="" class="p-keyword__count">0</a> 84 </div> 85 <div class="p-hamburger"> 86 <span class="p-hamburger__bar"></span> 87 <span class="p-hamburger__bar"></span> 88 <span class="p-hamburger__bar"></span> 89 </div> 90 </div> 91 </header>
css
1.l-header__container { 2 display: flex; 3 align-items: center; 4} 5 6.p-section:last-child { 7 margin-top: 24px; 8} 9 10 .white-space: nowrap; 11 } 12 13 .l-header__container { 14 justify-content: space-between; 15 } 16 17 .p-menu { 18 display: none; 19 } 20 21 .p-hamburger__fade { 22 display: none; 23 } 24 25 .p-login { 26 width: 900px; 27 margin: 0 auto; 28 } 29 30 .p-login__menu { 31 display: flex; 32 justify-content: flex-end; 33 } 34 35 .p-login__list:not(:last-child) { 36 margin-right: 20px; 37 } 38 39 .p-login__button { 40 color: #000; 41 text-decoration: none; 42 font-size: 12px; 43 } 44 45 .p-login__button:hover { 46 text-decoration: underline; 47 } 48 49 .l-header { 50 width: 900px; 51 margin: 0 auto; 52 } 53 54 .l-header__logo { 55 width: 200px; 56 margin-right: 120px; 57 } 58 59 .p-nav__button { 60 color: #000; 61 text-decoration: none; 62 font-weight: bold; 63 } 64 65 .p-nav__button:hover { 66 color: #BBBBBB; 67 } 68 69 .p-nav__menu { 70 display: flex; 71 } 72 73 .p-nav__list { 74 margin-right: 60px; 75 } 76 77 .p-keyword__search { 78 width: 150px; 79 margin-right: 5px; 80 border-right:none; 81 border-left:none; 82 border-top:none; 83 border-width:1px; 84 } 85 86 .p-keyword__glasses { 87 width: 20px; 88 } 89 90 .p-keyword__cart { 91 width: 20px; 92 } 93 94 .p-keyword__count { 95 color: #000; 96 padding-top: 5px; 97 text-decoration: none; 98 } 99 100 .p-keyword__count:hover { 101 text-decoration: underline; 102 } 103 104 .p-keyword { 105 display: flex; 106 } 107 108 .p-keyword__list:first-child:after { 109 content: ""; 110 border-right:1px solid #000; 111 padding-right: 16px; 112 } 113 114 .p-keyword__list:last-child { 115 margin-left: 16px; 116 } 117 118 .p-keyword__container { 119 display: flex; 120 margin-right: 5px; 121 } 122 123 .p-section:first-child { 124 padding-top: 24px; 125 margin-bottom: 24px; 126 } 127 128 .p-nav__sub { 129 background-color: #000; 130 position: absolute; 131 left: 0px; 132 top: 135px; 133 width: 100%; 134 } 135 136 .p-nav__sub > li > a:hover { 137 text-decoration: underline; 138 } 139 140 .p-nav__container { 141 padding-left: 520px; 142 } 143 144 .p-nav__container:not(:nth-child(1)) { 145 display: flex; 146 } 147 148 .p-nav__container > li { 149 width: 33%; 150 margin-top: 16px; 151 color: #fff; 152 } 153 154 .p-nav__container > li > a { 155 color: #fff; 156 text-decoration: none; 157 } 158 159 .p-nav__container > li > a:hover { 160 text-decoration: underline; 161 } 162 163/* ナビゲーションをホバーしたとき下線 */ 164 .p-nav__list > a::after { 165 border-bottom: solid 4px #000; 166 content: ""; 167 display: block; 168 width: 0; 169 position: absolute; 170 top: 85px; 171 } 172 173 .p-nav__list > a:hover::after { 174 width: 50px; 175 } 176 177 #p-nav__botton2:hover::after { 178 width: 80px; 179 } 180 181 #p-nav__botton3:hover::after { 182 width: 100px; 183 } 184/* */ 185}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/09 09:52