質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

737閲覧

ドロップダウンメニューを作成したが、出てきたメニューをクリックしようとするとすぐメニューが閉じてしまう。

maring

総合スコア41

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/05/08 18:27

ドロップダウンメニューを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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

実現されたい動きになっているか分かりませんが、テストしてみました。

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .l-header__container { 10 display: flex; 11 align-items: center; 12} 13 14.p-section:last-child { 15 margin-top: 24px; 16} 17 18 /* .white-space: nowrap; 19 } */ 20 21 .l-header__container { 22 justify-content: space-between; 23 } 24 25 .p-menu { 26 display: none; 27 } 28 29 .p-hamburger__fade { 30 display: none; 31 } 32 33 .p-login { 34 width: 900px; 35 margin: 0 auto; 36 } 37 38 .p-login__menu { 39 display: flex; 40 justify-content: flex-end; 41 } 42 43 .p-login__list:not(:last-child) { 44 margin-right: 20px; 45 } 46 47 .p-login__button { 48 color: #000; 49 text-decoration: none; 50 font-size: 12px; 51 } 52 53 .p-login__button:hover { 54 text-decoration: underline; 55 } 56 57 .l-header { 58 width: 900px; 59 margin: 0 auto; 60 } 61 62 .l-header__logo { 63 width: 200px; 64 margin-right: 120px; 65 } 66 67 .p-nav__button { 68 color: #000; 69 text-decoration: none; 70 font-weight: bold; 71 } 72 73 .p-nav__button:hover { 74 color: #BBBBBB; 75 } 76 77 .p-nav__menu { 78 display: flex; 79 } 80 81 .p-nav__list { 82 margin-right: 60px; 83 } 84 85 .p-keyword__search { 86 width: 150px; 87 margin-right: 5px; 88 border-right:none; 89 border-left:none; 90 border-top:none; 91 border-width:1px; 92 } 93 94 .p-keyword__glasses { 95 width: 20px; 96 } 97 98 .p-keyword__cart { 99 width: 20px; 100 } 101 102 .p-keyword__count { 103 color: #000; 104 padding-top: 5px; 105 text-decoration: none; 106 } 107 108 .p-keyword__count:hover { 109 text-decoration: underline; 110 } 111 112 .p-keyword { 113 display: flex; 114 } 115 116 .p-keyword__list:first-child:after { 117 content: ""; 118 border-right:1px solid #000; 119 padding-right: 16px; 120 } 121 122 .p-keyword__list:last-child { 123 margin-left: 16px; 124 } 125 126 .p-keyword__container { 127 display: flex; 128 margin-right: 5px; 129 } 130 131 .p-section:first-child { 132 padding-top: 24px; 133 margin-bottom: 24px; 134 } 135 136 .p-nav__sub { 137 background-color: #000; 138 position: absolute; 139 left: 0px; 140 top: 135px; 141 width: 100%; 142 } 143 144 .p-nav__sub > li > a:hover { 145 text-decoration: underline; 146 } 147 148 .p-nav__container { 149 padding-left: 520px; 150 } 151 152 .p-nav__container:not(:nth-child(1)) { 153 display: flex; 154 } 155 156 .p-nav__container > li { 157 width: 33%; 158 margin-top: 16px; 159 color: #fff; 160 } 161 162 .p-nav__container > li > a { 163 color: #fff; 164 text-decoration: none; 165 } 166 167 .p-nav__container > li > a:hover { 168 text-decoration: underline; 169 } 170 171/* ナビゲーションをホバーしたとき下線 */ 172 .p-nav__list > a::after { 173 border-bottom: solid 4px #000; 174 content: ""; 175 display: block; 176 width: 0; 177 position: absolute; 178 top: 85px; 179 } 180 181 .p-nav__list > a:hover::after { 182 width: 50px; 183 } 184 185 #p-nav__botton2:hover::after { 186 width: 80px; 187 } 188 189 #p-nav__botton3:hover::after { 190 width: 100px; 191 } 192 </style> 193</head> 194<body> 195 196 <header class="l-header"> 197 <div class="l-header__container"> 198 <a href=""><img class="l-header__logo" src="./assets/images/icon1.png" alt="会社ロゴ" ></a> 199 <nav class="p-nav"> 200 <ul class="p-nav__menu"> 201 <li class="p-nav__list"> 202 <a href="" class="p-nav__button">MENS</a> 203 <ul class="p-nav__sub"> 204 <div class="p-nav__container"> 205 <li><a href="">MENSTOP</a></li> 206 <li>BRAND</li> 207 <li><a href="">ブランドを選択する</a></li> 208 <li>CATEGORY</li> 209 </div> 210 <div class="p-nav__container"> 211 <li><a href="">トップス</a></li> 212 <li><a href="">アウター</a></li> 213 <li><a href="">パンツ</a></li> 214 </div> 215 <div class="p-nav__container"> 216 <li><a href="">オールインワン</a></li> 217 <li><a href="">スーツ</a></li> 218 <li><a href="">バッグ</a></li> 219 </div> 220 <div class="p-nav__container"> 221 <li><a href="">シューズ</a></li> 222 <li><a href="">小物</a></li> 223 <li><a href="">アクセサリー</a></li> 224 </div> 225 <div class="p-nav__container"> 226 <li><a href="">アンダーウェア</a></li> 227 <li><a href="">レッグウェア</a></li> 228 <li><a href="">帽子</a></li> 229 </div> 230 </ul> 231 </li> 232 <li class="p-nav__list"> 233 <a href="" class="p-nav__button" id="p-nav__botton2">WOMENS</a> 234 <ul class="p-nav__sub"> 235 <div class="p-nav__container"> 236 <li><a href="">WOMENSTOP</a></li> 237 <li>BRAND</li> 238 <li><a href="">ブランドを選択する</a></li> 239 <li>CATEGORY</li> 240 </div> 241 <div class="p-nav__container"> 242 <li><a href="">トップス</a></li> 243 <li><a href="">アウター</a></li> 244 <li><a href="">パンツ</a></li> 245 </div> 246 <div class="p-nav__container"> 247 <li><a href="">オールインワン</a></li> 248 <li><a href="">スーツ</a></li> 249 <li><a href="">バッグ</a></li> 250 </div> 251 <div class="p-nav__container"> 252 <li><a href="">シューズ</a></li> 253 <li><a href="">小物</a></li> 254 <li><a href="">アクセサリー</a></li> 255 </div> 256 <div class="p-nav__container"> 257 <li><a href="">アンダーウェア</a></li> 258 <li><a href="">レッグウェア</a></li> 259 <li><a href="">帽子</a></li> 260 </div> 261 </ul> 262 </li> 263 <li class="p-nav__list"> 264 <a href="" class="p-nav__button" id="p-nav__botton3">SHOP LIST</a> 265 </li> 266 </ul> 267 </nav> 268 <div class="p-keyword"> 269 <input class="p-keyword__search" type="search" placeholder="何かお探しですか"> 270 <ul class="p-keyword__container"> 271 <li class="p-keyword__list"> 272 <a href=""><img class="p-keyword__glasses" src="./assets/images/icon2.png" alt="虫眼鏡"></a> 273 </li> 274 <li class="p-keyword__list"> 275 <a href=""><img class="p-keyword__cart" src="./assets/images/icon3.png" alt="虫眼鏡"></a> 276 </li> 277 </ul> 278 <a href="" class="p-keyword__count">0</a> 279 </div> 280 <div class="p-hamburger"> 281 <span class="p-hamburger__bar"></span> 282 <span class="p-hamburger__bar"></span> 283 <span class="p-hamburger__bar"></span> 284 </div> 285 </div> 286 </header> 287 288 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> 289 <script> 290 $(function() { 291 $('.p-nav__sub').hide(); 292 $('.p-nav__list').hover( 293 function(){$(this).find('.p-nav__sub').slideDown();}, 294 function(){$(this).find('.p-nav__sub').slideUp();}, 295 ); 296 }); 297 </script> 298</body> 299</html>

jQueryをCDNで読み込んでいるのですが、「slim版」だとslideDown等の関数がサポートされていないようです。
http://www.it-view.net/jquery%E3%81%AEslidedown-slideup%E3%81%8C%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%AA%E3%81%84%E5%8E%9F%E5%9B%A0-324.html
minified版だと概ねうまく動いたかと思います。

参考になれば幸いです。

投稿2022/05/08 22:57

kvan

総合スコア41

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maring

2022/05/09 09:52

ありがとうございます。やはり当方の環境ではうまく動きませんでしたのでjqueryの導入から見直したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問