Q&A
jQueryはどのバージョンを入れていますか？バージョンおよびCDNで使用している場合はURLを質問文に追記してください。
前提・実現したいこと
jqeuryでHPを作っています。
slideDown slideUp機能を実装しましたが動いてくれません。
発生している問題・エラーメッセージ
エラーなどは発生せず、jqueryの他のコードは動きます。
該当のソースコード
<body> <div id="nav"> <ul> <li><a href="#">当院について</a> <ul> <li><a href="#">感染症対策</a></li> <li><a href="#">院長ご挨拶</a></li> <li><a href="#">医師紹介</a></li> </ul> </li> <li><a href="#">診療のご案内</a> <ul> <li><a href="#">眼科</a></li> <li><a href="#">訪問医療</a></li> </ul> </li> <li><a href="#">院内のご案内</a> <ul> <li><a href="#">院内設備について</a></li> <li><a href="#">オンライン診療について</a></li </ul> </li> <li><a href="#">お知らせ</a> <ul> <li><a href="#">採用情報</a></li> <li><a href="#">オンライン診療について</a></li </ul> </li> <li><a href="#">アクセス</a></li> </div> <script> $(function(){ $("#nav ul li").eq(1).hover(function(){ $(this).children("ul").slideDown("slow"); },function(){ $(this).children("ul").slideUp("slow"); }); }); </script> </body> </html> <style> #nav ul{box-shadow:2px 2px 5px; border-radius:5px; overflow:hidden; margin:0; padding:0; list-style-type:none; background:#eee;} #nav ul li{float:left;} #nav ul li a{width:120px; list-style: height 40px; height:40px; text-align:center; display:block;} #nav ul li a:hover{background:#888;} #nav ul li ul{position:absolute;} #nav ul li ul li{float:none;} </style>
試したこと
検索などで調べましたが解決に至っておりません。cssが間違っているのでしょうか。
cssのdisplay:inline;を試しましたができませんでした。
申し訳ありませんがご教示いただきたいです。
###利用環境
windows vscodeを利用しています。
###追記・修正
jquery-3.5.1.minのバージョンを入れています。
CDNは使用しておりません。すみません。
回答2件
0
ベストアンサー
HTMLの構文エラーを修正して下記のようにしたらとりあえずホバーは動きました。
JavaScript
1 $("#nav >ul> li").eq(1).hover(function(){ 2 $(this).children("ul").slideDown("slow"); 3},function(){ 4 $(this).children("ul").slideUp("slow"); 5 }); 6```**動くサンプル：**[https://jsfiddle.net/43w7ev2o/](https://jsfiddle.net/43w7ev2o/)
投稿2020/05/21 11:17
総合スコア69606
0
下記でどうでしょうか。
js
1$("#nav > ul > li > ul").hide(); //追加 2$(function(){ 3 $("#nav ul li").hover(function(){ 4 $(this).children("ul").slideDown("slow"); 5},function(){ 6 $(this).children("ul").slideUp("slow"); 7 }); 8});
あるいは、CSSに下記を追加してもいいでしょう。
css
1#nav > ul > li > ul { 2 display: none; 3}
事前に非表示にしてないと、slideDown は有効にならないということです。
投稿2020/05/21 10:31
総合スコア34075
あなたの回答
tips
プレビュー
