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

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

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

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

5454閲覧

要素をクリック時、アコーディオンを開き背景を変え、それ以外を開いたときに背景色を戻したい。

yajio

総合スコア16

HTML5

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

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2019/07/02 20:39

編集2019/07/03 08:37

前提・実現したいこと

イメージ的にはこのような感じです。
イメージ説明

HTML,CSS,Javascriptで、アコーディオンを3つ掲載しているページがあります。
①アコーディオン1
②アコーディオン2
③アコーディオン3

複数開くようにしています。
アコーディオンはそれぞれ<div>で囲まれており
アコーディオン1を開くと1のアコーディオンが開き、アコーディオン1を囲っている背景(白に)が変わります。
アコーディオンは1つだけ開くようにしています。

そこで、例えばアコーディオン2をクリックしたとき、アコーディオン2の背景を変え、アコーディオン1の背景をもとに戻したいのです。
クリックした<div>を白にして、それ以外の背景をもとに戻したいです。

よろしくお願い申し上げます。

発生している問題・エラーメッセージ

アコーディオンは閉じますが、背景が変わりません。

該当のソースコード

html

1<script src="js/jquery-3.3.1.min.js"></script> 2 3 4<body> 5 6<div class="bgBox">ffffffffffffff 7 8<ul class="accordion"> 9 <li> 10 <p id="p1" class="ac1">アコーディオン1</p> 11 <ul class="inner"> 12 <li class="content1-1">コンテンツ1</li> 13 <li class="content1-2">コンテンツ2</li> 14 <li class="content1-3">コンテンツ3</li> 15 </ul> 16 </li> 17</ul> 18</div> 19 20 21 22<p> </p><p> </p> 23 24<div class="bgBox2">ffffffffffffff 25<ul class="accordion"> 26 <li> 27 <p id="p2" class="ac2">アコーディオン2</p> 28 <ul class="inner"> 29 <li class="content2-1">コンテンツ1</li> 30 <li class="content2-2">コンテンツ2</li> 31 <li class="content2-3">コンテンツ3</li> 32 </ul> 33 </li> 34</ul> 35</div> 36 37<p> </p><p> </p> 38 39 40<div class="bgBox3">ffffffffffffff 41<ul class="accordion"> 42 <li> 43 <p id="p3" class="ac3">アコーディオン3</p> 44 <ul class="inner"> 45 <li class="content3-1">コンテンツ1</li> 46 <li class="content3-2">コンテンツ2</li> 47 <li class="content3-3">コンテンツ3</li> 48 </ul> 49 </li> 50</ul> 51</div> 52 53 54<style> 55.accordion {text-align: center;} 56.accordion .inner {display: none;} 57.accordion p{cursor: pointer; padding: 10px;} 58.accordion p.ac1{background: #F50057;position: relative;} 59.accordion p.ac2{background: #FFEA00;position: relative;} 60.accordion p.ac3{background: #64DD17;position: relative;} 61.accordion .inner li{padding: 10px 0;} 62.accordion .inner li.content1-1{background: #F48FB1;} 63.accordion .inner li.content1-2{background: #F8BBD0;} 64.accordion .inner li.content1-3{background: #FCE4EC;} 65.accordion .inner li.content2-1{background: #FFF59D;} 66.accordion .inner li.content2-2{background: #FFF9C4;} 67.accordion .inner li.content2-3{background: #FFFDE7;} 68.accordion .inner li.content3-1{background: #C5E1A5;} 69.accordion .inner li.content3-2{background: #DCEDC8;} 70.accordion .inner li.content3-3{background: #F1F8E9;} 71 72p.ac1:after,p.ac2:after,p.ac3:after { 73 content: ""; 74 position: absolute; 75 right: 25px; 76 top: 38%; 77 transition: all 0.2s ease-in-out; 78 display: block; 79 width: 8px; 80 height: 8px; 81 border-top: solid 2px #fff; 82 border-right: solid 2px #fff; 83 -webkit-transform: rotate(135deg); 84 transform: rotate(135deg); 85} 86 87p.ac1.open:after,p.ac2.open:after,p.ac3.open:after { 88 -webkit-transform: rotate(-45deg); 89 transform: rotate(-45deg); 90 top: 45%; 91} 92 93 94 95.bgBox,.bgBox2,.bgBox3{ 96 background-color:white; 97 padding : 20px; 98 transition: all 0.2s ease-in-out; 99} 100.bgBox{ 101 background-color:orange; 102} 103.bgBox2{ 104 background-color:yellow; 105} 106.bgBox3{ 107 background-color:green; 108} 109.bgPink{ 110 background-color:pink; 111} 112.bgyellow{ 113 background-color:yellow; 114} 115.bggreen{ 116 background-color:green; 117} 118.bgwhite{ 119 background-color:white; 120} 121</style> 122<script> 123$(function(){ 124 125 //.accordionの中のp要素がクリックされたら 126 $('.accordion p').click(function(){ 127 128 //クリックされた.accordionの中のp要素に隣接する.accordionの中の.innerを開いたり閉じたりする。 129 $(this).next('.accordion .inner').slideToggle(); 130 131 //クリックされた.accordionの中のp要素以外の.accordionの中のp要素に隣接する.accordionの中の.innerを閉じる 132 $('.accordion p').not($(this)).next('.accordion .inner').slideUp(); 133 134        /*矢印の向きを変更*/ 135 $(this).toggleClass('open'); 136 137       //クリックしたaccordion-title以外の全てのopenを取る 138        $("p.ac1,p.ac2,p.ac3").not(this).removeClass("open"); 139 140 }); 141}); 142 143 144 145$(function(){ 146 147$("#p1").click(function() { 148 // cssで背景色を切り替え 149 $(".bgBox").toggleClass("bgwhite"); 150 }); 151 152$("#p2").click(function() { 153 // cssで背景色を切り替え 154 $(".bgBox2").toggleClass("bgwhite"); 155 }); 156 157$("#p3").click(function() { 158 // cssで背景色を切り替え 159 $(".bgBox3").toggleClass("bgwhite"); 160 }); 161 162 163}); 164</script> 165 166 167 168</body> 169

試したこと

.not($(this)) を様々使ってみましたがだめでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

yambejp

2019/07/03 08:28

ソースは上下を「```」で囲んでください
yajio

2019/07/03 08:37

yambejpさん、ありがとうございます。 使い方がまだわからず助かりました。 よろしくお願い申し上げます。
guest

回答1

0

ベストアンサー

アコーディオンは閉じますが、背景が変わりません。

閉じるなら背景かわっても見えないのでは?

javascript

1<style> 2.active{background-Color:red} 3</style> 4<script> 5$(function(){ 6 $('.accordion ul').hide(); 7 $('.accordion p').on('click',function(){ 8 $('.accordion p').not($(this)).next('ul').slideUp().removeClass('active'); 9 $(this).next('ul').slideToggle().toggleClass('active'); 10 }); 11}); 12</script> 13<div class="bgBox">ffffffffffffff 14 <ul class="accordion"> 15 <li> 16 <p id="p1" class="ac1">アコーディオン1</p> 17 <ul class="inner"> 18 <li class="content1-1">コンテンツ1</li> 19 <li class="content1-2">コンテンツ2</li> 20 <li class="content1-3">コンテンツ3</li> 21 </ul> 22 </li> 23 </ul> 24</div> 25<div class="bgBox2">ffffffffffffff 26 <ul class="accordion"> 27 <li> 28 <p id="p2" class="ac2">アコーディオン2</p> 29 <ul class="inner"> 30 <li class="content2-1">コンテンツ1</li> 31 <li class="content2-2">コンテンツ2</li> 32 <li class="content2-3">コンテンツ3</li> 33 </ul> 34 </li> 35 </ul> 36</div> 37<div class="bgBox3">ffffffffffffff 38 <ul class="accordion"> 39 <li> 40 <p id="p3" class="ac3">アコーディオン3</p> 41 <ul class="inner"> 42 <li class="content3-1">コンテンツ1</li> 43 <li class="content3-2">コンテンツ2</li> 44 <li class="content3-3">コンテンツ3</li> 45 </ul> 46 </li> 47 </ul> 48</div>

追記

こういうことですかね?

javascript

1$(function(){ 2 $("#p1").click(function() { 3 $(".bgBox").toggleClass("bgwhite").siblings('.bgwhite').removeClass('bgwhite'); 4 }); 5 $("#p2").click(function() { 6 $(".bgBox2").toggleClass("bgwhite").siblings('.bgwhite').removeClass('bgwhite'); 7 }); 8 $("#p3").click(function() { 9 $(".bgBox3").toggleClass("bgwhite").siblings('.bgwhite').removeClass('bgwhite'); 10 }); 11});

投稿2019/07/03 00:35

編集2019/07/03 08:39
yambejp

総合スコア114572

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

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

yajio

2019/07/03 07:33

yambejpさんありがとうございます。 bgBox○ の中にはそれぞれアコーディオン以外にもコンテンツが含まれるのです。 よろしくお願い申し上げます。
yambejp

2019/07/03 08:39

調整しました
yajio

2019/07/03 09:06

yambejpさん、うわ~ありがとうございます! まさにこれです~!!! 本当にありがとうございます! 私もこれを機にjs勉強させていただきます。 また行き詰まりましたらご教授いただけますと幸いでございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問