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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1110閲覧

ドロップダウンメニューでのclickとhover併用

watermusic

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

3クリップ

投稿2019/01/25 08:50

編集2019/01/25 08:51

ドロップダウンメニューの仕様についてご相談させてください。

現在、下記のような形でドロップダウンメニューを作成しています。
https://codepen.io/watermusic/pen/ErVJVW

▼解決したいの下記2点になります

  1. メインメニュークリックでドロップダウンを表示、その際メインメニュー背景はグレーに切替という形にしていますが、他のメニューをクリックで背景を白に戻したい(同じメニューをクリックする事では白に戻ります)

 

  1. メインメニューはhoverで背景がグレーに変わるようにしていますが、一度メニューをクリックしてドロップダウンを表示してしまうと、hoverが効かなくなってしまう

色々と試しているのですが、どうしても上手く動かず苦戦しており
解決策やヒントなどございましたらご教授いただけると幸いです。
宜しくお願いいたします。

html

1<div id="nav"> 2 <ul> 3 <li class="slidebtn"><a href="#">MENU 1</a> 4 <ul class="submenu fashion"> 5 <li><a href="#">SUB MENU-1</a></li> 6 <li><a href="#">SUB MENU-2</a></li> 7 <li><a href="#">SUB MENU-3</a></li> 8 </ul> 9 </li> 10 <li class="slidebtn"><a href="#">MENU 2</a> 11 <ul class="submenu beauty"> 12 <li><a href="#">SUB MENU-1</a></li> 13 <li><a href="#">SUB MENU-2</a></li> 14 <li><a href="#">SUB MENU-3</a></li> 15 </ul> 16 </li> 17 <li class="slidebtn"><a href="#">MENU 3</a> 18 <ul class="submenu goods"> 19 <li><a href="#">SUB MENU-1</a></li> 20 <li><a href="#">SUB MENU-2</a></li> 21 <li><a href="#">SUB MENU-3</a></li> 22 </ul> 23 </li> 24 </ul> 25</div>

css

1#nav{ 2 display: block; 3 width: 724px; 4 position: relative; 5} 6 7#nav ul{ 8 width: 724px; 9 margin: 0 auto; 10 list-style: none; 11} 12#nav ul li{ 13 float: left; 14 width: 240px; 15 font-size: 12px; 16 border-right: 1px solid #393635; 17 text-align: center; 18 letter-spacing: .15em; 19 text-indent: .15em; 20 position: relative; 21} 22#nav ul li a{ 23 display: block; 24 width: 100%; 25 height: 50px; 26 line-height: 50px; 27 background-color: #ffffff; 28} 29#nav ul li a:hover{ 30 background-color: #E6E6E6; 31} 32#nav ul li:first-child{ 33 border-left: 1px solid #393635; 34} 35#nav ul li.slidebtn ul.close{display:none;} 36#nav ul li ul.submenu{ 37 position:absolute; 38 top:51px; 39 left:-1px; 40 white-space:nowrap; 41 font-weight: normal; 42} 43#nav ul li ul.submenu.beauty li{ 44 width:241px; 45} 46#nav ul li ul.submenu li{ 47 line-height: 50px; 48 text-align:center; 49 clear:both; 50 border-bottom:1px solid #393635; 51 border-left:1px solid #393635; 52} 53#nav ul li ul.submenu li a{ 54 background-color: #FBE8E0; 55} 56#nav ul li ul.submenu.beauty li a{ 57 background-color: #DDF2FF; 58} 59#nav ul li ul.submenu.goods li a{ 60 background-color: #FFFCB9; 61} 62#nav ul li ul.submenu li a:hover{ 63 background-color: #FCEEE9; 64} 65#nav ul li ul.submenu.beauty li a:hover{ 66 background-color: #E7F5FE; 67} 68#nav ul li ul.submenu.goods li a:hover{ 69 background-color: #FFFDCE; 70}

javascript

1$(function(){ 2 $("#nav ul li.slidebtn a").addClass("close"); 3 $("#nav ul").addClass("close"); 4 5 $("#nav ul li.slidebtn > a").each(function(){ 6 var allsubmenu = $("#nav ul.submenu"); 7 var btn = $(this); 8 var submenu = $(this).next(); 9 10 btn.click(function(){ 11 if($(this).hasClass("open")){ 12 $(this).removeClass("open").addClass("close"); 13 $(submenu).slideUp("fast"); 14 $(this).css('background-color','#ffffff'); 15 }else{ 16 $(allsubmenu).slideUp("fast"); 17 $("#nav ul li.slidebtn a").removeClass("open").addClass("close"); 18 $(submenu).slideDown("fast"); 19 $(btn).removeClass("close").addClass("open"); 20 $(this).css('background-color','#E6E6E6'); 21 } 22 return false; 23 }); 24 }); 25 //ウィンドウ内の任意の場所クリックで、ドロップダウンを非表示&メニュー背景を白に戻す 26 $(document).click(function(event) { 27 if (!$(event.target).closest("#nav").length) { 28 $("#nav ul.submenu").slideUp("fast").removeClass("open").addClass("close"); 29 $("#nav ul li.slidebtn > a").css('background-color','#ffffff'); 30 } 31 }); 32});

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

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

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

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

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

guest

回答2

0

ベストアンサー

質問文に記述されている CSS と jQuery を以下のように変更することで、質問者さんの実現したいことが行えると思います(動作確認リンク)。

CSS

1#nav{ 2 display: block; 3 width: 724px; 4 position: relative; 5} 6 7#nav ul{ 8 width: 724px; 9 margin: 0 auto; 10 list-style: none; 11} 12#nav ul li{ 13 float: left; 14 width: 240px; 15 font-size: 12px; 16 border-right: 1px solid #393635; 17 text-align: center; 18 letter-spacing: .15em; 19 text-indent: .15em; 20 position: relative; 21} 22#nav ul li a{ 23 display: block; 24 width: 100%; 25 height: 50px; 26 line-height: 50px; 27 background-color: #ffffff; 28} 29#nav ul li a:hover{ 30 background-color: #E6E6E6; 31} 32#nav ul li:first-child{ 33 border-left: 1px solid #393635; 34} 35#nav ul li.slidebtn ul.close{display:none;} 36#nav ul li ul.submenu{ 37 position:absolute; 38 top:51px; 39 left:-1px; 40 white-space:nowrap; 41 font-weight: normal; 42} 43#nav ul li ul.submenu.beauty li{ 44 width:241px; 45} 46#nav ul li ul.submenu li{ 47 line-height: 50px; 48 text-align:center; 49 clear:both; 50 border-bottom:1px solid #393635; 51 border-left:1px solid #393635; 52} 53#nav ul li ul.submenu li a{ 54 background-color: #FBE8E0; 55} 56#nav ul li ul.submenu.beauty li a{ 57 background-color: #DDF2FF; 58} 59#nav ul li ul.submenu.goods li a{ 60 background-color: #FFFCB9; 61} 62#nav ul li ul.submenu li a:hover{ 63 background-color: #FCEEE9; 64} 65#nav ul li ul.submenu.beauty li a:hover{ 66 background-color: #E7F5FE; 67} 68#nav ul li ul.submenu.goods li a:hover{ 69 background-color: #FFFDCE; 70} 71 72/* 追記 */ 73.open { 74 background-color: #E6E6E6 !important; 75} 76.close { 77 background-color: #fff; 78} 79/* 追記 */

jQuery

1$(function() { 2 $("#nav ul li.slidebtn a").addClass("close"); 3 $("#nav ul").addClass("close"); 4 5 $("#nav ul li.slidebtn > a").each(function() { 6 var allsubmenu = $("#nav ul.submenu"); 7 var btn = $(this); 8 var submenu = $(this).next(); 9 10 btn.click(function() { 11 if ($(this).hasClass("open")) { 12 $(this) 13 .removeClass("open") 14 .addClass("close"); 15 $(submenu).slideUp("fast"); 16 // $(this).css("background-color", "#ffffff"); 17 } else { 18 $(allsubmenu).slideUp("fast"); 19 $("#nav ul li.slidebtn a") 20 .removeClass("open") 21 .addClass("close"); 22 $(submenu).slideDown("fast"); 23 $(btn) 24 .removeClass("close") 25 .addClass("open"); 26 // $(this).css("background-color", "#E6E6E6"); 27 } 28 return false; 29 }); 30 }); 31 //ウィンドウ内の任意の場所クリックで、ドロップダウンを非表示&メニュー背景を白に戻す 32 $(document).click(function(event) { 33 if (!$(event.target).closest("#nav").length) { 34 $("#nav ul.submenu") 35 .slideUp("fast") 36 .removeClass("open") 37 .addClass("close"); 38 // $("#nav ul li.slidebtn > a").css("background-color", "#ffffff"); 39 $(".open") 40 .removeClass("open") 41 .addClass("close"); // 追加 42 } 43 }); 44});

投稿2019/01/25 09:30

編集2019/01/25 09:34
s8_chu

総合スコア14731

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

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

watermusic

2019/01/25 10:22

全て私の希望を満たした形での動作を教えていただきました! またスクリプトもどこを追加したのかなどもわかりやすく記載していただき、とても勉強になります。 ありがとうございました!
yambejp

2019/01/25 10:56

仕様を追加しておきました
guest

0

javascript

1$(function(){ 2 $("#nav ul").addClass("close"); 3 $("#nav .slidebtn>a").on('click',function(e){ 4 e.preventDefault(); 5 $(this).next('ul').toggleClass("close"); 6 $(this).css('background-Color',$(this).next('ul').hasClass("close")?'':'#E6E6E6'); 7 $(this).closest('li').siblings().find('ul').addClass("close").prev('a').css('background-Color',''); 8 }); 9});

追記

navi以外をクリックするとnaviを閉じる

javascript

1$(function(){ 2 $("#nav ul").addClass("close"); 3 $(document).find('*').on('click',function(e){ 4 if($(this).closest('#nav').length==0){ 5 $("#nav ul").addClass('close'); 6 $("#nav .slidebtn>a").css('background-Color',''); 7 }else{ 8 e.stopPropagation(); 9 } 10 }); 11 $("#nav .slidebtn>a").on('click',function(e){ 12 e.preventDefault(); 13 $(this).next('ul').toggleClass("close"); 14 $(this).css('background-Color',$(this).next('ul').hasClass("close")?'':'#E6E6E6'); 15 $(this).closest('li').siblings().find('ul').addClass("close").prev('a').css('background-Color',''); 16 }); 17}); 18

投稿2019/01/25 09:49

編集2019/01/25 10:56
yambejp

総合スコア114505

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

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

watermusic

2019/01/25 10:25

回答ありがとうございます! 簡潔なコードを回答いただいたのですが、メインメニュー以外のウィンドウ内の任意の場所クリックでもドロップダウンをしまう&背景白にするという記述が省かれており、自力で追加してみようとしましたが、恥ずかしながら私の知識では出来ませんでした。 でもスマートなコード記述、とても勉強になります! ありがとうございました!
watermusic

2019/01/25 11:12

こんなに簡潔なコードで実装できるんですね! 要望通りの動きができました。 重ねてありがとうございましたm(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問