質問編集履歴

1 タイトル

s__oramame

s__oramame score 2

2020/08/04 15:14  投稿

### 前提・実現したいこと
▼こちらのページのアコーディオンの実装中なのですが、、
https://125naroom.com/web/3046
4. アコーディオン、一番目は開けておく(一つ開けると他は閉じる)
.accordion_headerをクリックした際、
.accordion_oneにもopenクラスが付いたり外れたりするようにしたいです。
装飾で+αしたいなというのがあり、jQueryをどう記述し直せば良いかわからず、
どなたかご教示いただきたく
よろしくおねがいします!
### 該当のソースコード
```HTML
<div class="accordion_one">
<div class="accordion_header stay">アコーディオン、一番目は開けておく
<div class="i_box"><i class="one_i"></i></div>
</div>
<div class="accordion_inner stay">
<div class="box_one">
<p class="txt_a_ac">アコーディオンの中身です。一つ開けると他は閉じます。</p>
</div>
</div>
</div>
```
```jQuery
// .s_04 .accordion_one
$(function(){
//.accordion_oneの中の.accordion_headerがクリックされたら
$('.s_04 .accordion_one .accordion_header').click(function(){
//クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
$(this).next('.accordion_inner').slideToggle();
$(this).toggleClass("open");
//クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる
$('.s_04 .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
$('.s_04 .accordion_one .accordion_header').not($(this)).removeClass("open");
$('.s_04 .accordion_one .accordion_header.stay').not($(this)).toggleClass("open");
});
});
```
  • HTML

    23463 questions

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

  • jQuery

    13098 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る