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

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

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

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

Q&A

2回答

1031閲覧

アコーディオンをクリックした時に、ほかのアコーディオンを閉じる

MTON

総合スコア13

JavaScript

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

0グッド

0クリップ

投稿2020/02/11 11:35

アコーディオンをクリックした時に、ほかのアコーディオンを閉じるようにしたいのですが、うまくいきません。
「クリックした要素以外のほかの要素に対して命令を実行したいとき」はどうすればよいのでしょうか?
jqueryではなく、javascriptで実装をおこないたいです。

<dl> <dt class="question">質問</dt> <dd class="answer">答え</dd> </dl> <dl> <dt class="question">質問</dt> <dd class="answer">答え</dd> </dl> <style> body { margin: 0; padding: 0; } dl { padding: 0; margin: 0; border-bottom: 1px solid #ff0; } dt { background: #000; color: #ffffff; padding-top: 10px; padding-bottom: 10px; } dd { background: rgb(9, 100, 100); color: #ffffff; padding-top: 10px; padding-bottom: 10px; margin-left: 0; display: none; transition: all 0.3s ease; } dd.active { display: block; transition: all 0.3s ease; } </style> <script> var questions = document.getElementsByClassName("question"); var answers = document.getElementsByClassName("answer"); for (let i = 0; i < questions.length; i++) { questions[i].addEventListener("click",function () { //ためしたこと  questions[i].nextElementSibling.classList.remove("active"); this.nextElementSibling.classList.toggle("active"); }); } </script>

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

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

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

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

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

yambejp

2020/02/12 05:16

すでに開いているものをクリックしたら閉じるかどうかで 書き方がちがってきます
guest

回答2

0

javascript

1var questions = document.getElementsByClassName("question"); 2var answers = document.getElementsByClassName("answer"); 3 4[...questions].forEach((item, index) => { 5 item.addEventListener('click', () => { 6 [...answers].forEach((item2, index2) => { 7 if(item2.className.indexOf('active') === -1 && index === index2) { 8 item2.classList.add('active') 9 } else { 10 item2.classList.remove('active') 11 } 12 }) 13 }) 14})

で行うことができると思います。

こちらがcodepenになります。
https://codepen.io/miwashutaro0611/pen/PoqqXQm

投稿2020/02/11 13:02

jackmiwamiwa

総合スコア395

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

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

0

ざっくりこんな感じで
(セキュリティ制限で回答欄に長文かけません、あしからず)

投稿2020/02/12 05:18

編集2020/02/12 05:19
yambejp

総合スコア114581

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

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

yambejp

2020/02/12 05:18

window.addEventListener('DOMContentLoaded', ()=>{ const ans=document.querySelectorAll('.answer'); ans.forEach(x=>{ x.style.display="none"; }); document.querySelectorAll('.question').forEach(x=>{ x.addEventListener('click',()=>{ var n=x.nextElementSibling; ans.forEach(y=>{ y.style.display=y==n?"":"none"; }); }); }); });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問