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

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

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

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

Q&A

1回答

557閲覧

アコーディオンメニューで他のボタンを押したら開いていたものが閉じるようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

0グッド

0クリップ

投稿2020/06/01 09:21

編集2020/06/01 14:35

タイトル1が押されたら.contents1の内容が開き、開いた状態でタイトル2を押したら開いていた.contents1が閉じて.contants2が開かれる(逆も同様)ということをしたいのですが、jQueryでの書き方がわかりません。
開閉のjQueryの記述をcontents1と2で分けていて、かつfadeToggleメソッドで開閉するようにしているから余計書き方がわからず...
方法がわかる方、助言いただけますと幸いです。またもっと良い書き方がある場合、ご教授いただけると嬉しいです。
よろしくお願いいたします。

html

1<header> 2 <div id="global-nav" class="visible-lg visible-md"> 3 <ul class="global-nav-inner"> 4 <li class="menu accordion-container"> 5 <p class="article-title contents1-ttl">タイトル1</p> 6 </li> 7 <li class="menu accordion-container"> 8 <p class="article-title contents2-ttl">タイトル2</p> 9 </li> 10 </ul> 11 <div class="accordion-content-pc contents1"> 12 内容 13 </div> 14 <div class="accordion-content-pc contents2"> 15 内容 16 </div> 17 </div> 18</header>

javascript

1if (window.matchMedia('(min-width: 992px)').matches) { 2 $('.contents1-ttl').on('click', function () { 3 $('.contents1').fadeToggle(500); 4 }); 5 $('.contents2-ttl').on('click', function () { 6 $('.contents2').fadeToggle(500); 7 }); 8 9 } else { 10 $('.article-title').on('click', function () { 11 $(this).next().slideToggle(500); 12 $(this).toggleClass('open'); 13 }); 14 }

追記

回答いただきありがとうございます!htmlをサーバーで確認させていただきました。
記述をし忘れていたのですが、

  • 最初は内容が全て非表示の状態にする
  • タイトル1を押しても、contents1の内容が表示したり非表示にしたりできるようにする(2も同じ)

というようにもしたいです。こちらですとどのような記述方法になりますでしょうか?
注文が多く申し訳ございません。

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

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

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

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

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

guest

回答1

0

jQueryだと.is(":visible")で表示、非表示の状態が取得できるようです。
また、.fadeIn()で表示、.fadeOut()で非表示に出来ます。
以下のコードが参考になるかもしれません。

jQuery

1$(function () { 2 if (window.matchMedia("(min-width: 992px)").matches) { 3 //タイトル1, タイトル2, タイトル3, タイトル4を取得 4 $(".article-title").each(function (i, node) { 5 // 1,2,3,4に変換 6 var n = i + 1; 7 //タイトル1, タイトル2, タイトル3, タイトル4のノードをクリック 8 $(node).on("click", function (evt) { 9 //タイトルに一致する内容のノードが表示されている状態 10 if ($(".contents" + n).is(":visible")) { 11 } else { 12 //タイトルに一致する内容のノードが非表示だった場合 13 //内容をfadeInで表示する 14 $(".contents" + n).fadeIn(500); 15 } 16 //その他の内容を全部fadeOutで非表示 17 $(".accordion-content-pc:not(.contents" + n + ")").fadeOut(500); 18 }); 19 }); 20 } else { 21 $(".article-title").on("click", function () { 22 $(this).next().slideToggle(500); 23 $(this).toggleClass("open"); 24 }); 25 } 26});

こちらはHTML全体です。テストできると思います。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script> 8 <script> 9 $(function () { 10 if (window.matchMedia("(min-width: 992px)").matches) { 11 //タイトル1, タイトル2, タイトル3, タイトル4を取得 12 $(".article-title").each(function (i, node) { 13 // 1,2,3,4に変換 14 var n = i + 1; 15 //タイトル1, タイトル2, タイトル3, タイトル4のノードをクリック 16 $(node).on("click", function (evt) { 17 //タイトルに一致する内容のノードが表示されている状態 18 if ($(".contents" + n).is(":visible")) { 19 } else { 20 //タイトルに一致する内容のノードが非表示だった場合 21 //内容をfadeInで表示する 22 $(".contents" + n).fadeIn(500); 23 } 24 //その他の内容を全部fadeOutで非表示 25 $(".accordion-content-pc:not(.contents" + n + ")").fadeOut(500); 26 }); 27 }); 28 } else { 29 $(".article-title").on("click", function () { 30 $(this).next().slideToggle(500); 31 $(this).toggleClass("open"); 32 }); 33 } 34 }); 35 </script> 36 </head> 37 <body> 38 <header> 39 <div id="global-nav" class="visible-lg visible-md"> 40 <ul class="global-nav-inner"> 41 <li class="menu accordion-container"> 42 <p class="article-title contents1-ttl">タイトル1</p> 43 </li> 44 <li class="menu accordion-container"> 45 <p class="article-title contents2-ttl">タイトル2</p> 46 </li> 47 <li class="menu accordion-container"> 48 <p class="article-title contents3-ttl">タイトル3</p> 49 </li> 50 <li class="menu accordion-container"> 51 <p class="article-title contents4-ttl">タイトル4</p> 52 </li> 53 </ul> 54 <div class="accordion-content-pc contents1"> 55 内容1 56 </div> 57 <div class="accordion-content-pc contents2"> 58 内容2 59 </div> 60 <div class="accordion-content-pc contents3"> 61 内容3 62 </div> 63 <div class="accordion-content-pc contents4"> 64 内容4 65 </div> 66 </div> 67 </header> 68 </body> 69</html> 70

投稿2020/06/01 12:21

fake_shibe

総合スコア806

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問