jqueryを用いたアコーディオンメニューの挙動について

実現したいこと

アコーディオンメニューは全3層になっており、Aを開くとB-1とB-2が開く。
B-1を開くとC-1～3が開き、B-2を開くとC-1～3は閉じてC-4～6が開きます。
B及びCにはチェックボックスがついており、B-1を開くとB-1と子になっているC-1~3にもチェックが自動で入力されるようにしたい。
B-1を閉じるとB-1のチェックボックスも外れ、同時にC-1～3のチェックボックスも外れます。
BもCもデフォルトでチェックボックスは外れている状態にしておきたいです。
現在の動きがほぼ完成に近い状態です。

発生している問題・分からないこと

現在、チェックボックスを選択すると想定通りに動きますが、
テキストや余白部分を選択するとアコーディオンメニューは開くもののチェックボックスの動作が実行されません。
labelを用いてチェックボックスの選択範囲を広げると、アコーディオンメニューは開くものすぐに閉じてしまいます。
チェックボックスの選択範囲を広げつつアコーディオンメニューが正常に動作するようにしたいです。

該当のソースコード

html
1<head>
2    <meta charset="utf-8" />
3    <meta name="viewport" content="width=device-width, initial-scale=1" />
4    <meta name="keywords" content="" />
5    <meta name="description" content="" />
6    <title>タイトル</title>
7    <link rel="stylesheet" href="css/style.css" />
8    <script
9  src="https://code.jquery.com/jquery-3.4.1.min.js"
10  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
11  crossorigin="anonymous"></script>
12    <script src="js/sample.js" charset="utf-8"></script>
13</head>
14<body>
15    <header></header>
16    <div class="section s_07">
17        <div class="accordion_one">
18          <div class="accordion_header">A<div class="i_box"><i class="one_i"></i></div></div>
19          <div class="accordion_inner">
20
21            <div class="accordion_one checkbox">
22              <div class="accordion_header"><input type="checkbox" name="parent">B-1<div class="i_box"><i class="one_i"></i></div></div>
23              <div class="accordion_inner">
24                <div class="accordion_one">
25                  <label class="accordion_header"><input type="checkbox" name="child1">C-1</label>
26                  <label class="accordion_header"><input type="checkbox" name="child2">C-2</label>
27                  <label class="accordion_header"><input type="checkbox" name="child3">C-3</label>
28                </div>
29              </div>
30            </div>
31            <div class="accordion_one checkbox">
32              <div class="accordion_header"><label for=""><input type="checkbox" name="parent">B-2</label><div class="i_box"><i class="one_i"></i></div></div>
33              <div class="accordion_inner">
34                <div class="accordion_one">
35                  <label class="accordion_header"><input type="checkbox" name="child4">C-4</label>
36                  <label class="accordion_header"><input type="checkbox" name="child5">C-5</label>
37                  <label class="accordion_header"><input type="checkbox" name="child6">C-6</label>
38                </div>
39              </div>
40            </div>
41
42          </div>
43        </div>
44      </div>
45    <footer></footer>
46</body>

css
1/*====================================================================
2.s_07 .accordion_one
3====================================================================*/
4.s_07 .accordion_one {
5  max-width: 1024px;
6  margin: 0 auto;
7}
8.s_07 .accordion_one .accordion_header {
9  background-color: #57750C;
10  border-bottom: 1px solid #fff;
11  color: #fff;
12  font-size: 26px;
13  font-weight: bold;
14  padding: 20px 11%;
15  text-align: center;
16  position: relative;
17  z-index: +1;
18  cursor: pointer;
19  transition-duration: 0.2s;
20}
21.s_07 .accordion_one:nth-of-type(1) .accordion_inner .accordion_header {
22  background-color: #6E9119;
23}
24.s_07 .accordion_one:nth-of-type(1) .accordion_inner .accordion_inner  .accordion_header {
25  background-color: #83A03A;
26}
27.s_07 .accordion_one:nth-of-type(2) .accordion_header {
28  background-color: #ff9a05;
29}
30.s_07 .accordion_one:nth-of-type(2) .accordion_inner .accordion_header {
31  background-color: #ffb64a;
32}
33.s_07 .accordion_one:nth-of-type(2) .accordion_inner .accordion_inner  .accordion_header {
34  background-color: #ffce85;
35}
36.s_07 .accordion_one:nth-of-type(3) .accordion_header {
37  background-color: #1c85d8;
38}
39.s_07 .accordion_one:nth-of-type(3) .accordion_inner .accordion_header {
40  background-color: #4cacf9;
41}
42.s_07 .accordion_one:nth-of-type(3) .accordion_inner .accordion_inner  .accordion_header {
43  background-color: #85c9ff;
44}
45.s_07 .accordion_one .accordion_header:hover {
46  opacity: .8;
47}
48.s_07 .accordion_one .accordion_header .i_box {
49  display: flex;
50  justify-content: center;
51  align-items: center;
52  position: absolute;
53  top: 50%;
54  right: 5%;
55  width: 40px;
56  height: 40px;
57  border: 1px solid #fff;
58  margin-top: -20px;
59  box-sizing: border-box;
60  -webkit-transform: rotate(45deg);
61  transform: rotate(45deg);
62  transform-origin: center center;
63  transition-duration: 0.2s;
64}
65.s_07 .accordion_one .accordion_header .i_box .one_i {
66  display: block;
67  width: 18px;
68  height: 18px;
69  -webkit-transform: rotate(45deg);
70  transform: rotate(45deg);
71  transform-origin: center center;
72  transition-duration: 0.2s;
73  position: relative;
74}
75.s_07 .accordion_one .accordion_header.open .i_box {
76  -webkit-transform: rotate(-360deg);
77  transform: rotate(-360deg);
78}
79.s_07 .accordion_one .accordion_header .i_box .one_i:before, .s_07 .accordion_one .accordion_header .i_box .one_i:after {
80  display: flex;
81  content: '';
82  background-color: #fff;
83  border-radius: 10px;
84  width: 18px;
85  height: 4px;
86  position: absolute;
87  top: 7px;
88  left: 0;
89  -webkit-transform: rotate(0deg);
90  transform: rotate(0deg);
91  transform-origin: center center;
92}
93.s_07 .accordion_one .accordion_header .i_box .one_i:before {
94  width: 4px;
95  height: 18px;
96  top: 0;
97  left: 7px;
98}
99.s_07 .accordion_one .accordion_header.open .i_box .one_i:before {
100  content: none;
101}
102.s_07 .accordion_one .accordion_header.open .i_box .one_i:after {
103  -webkit-transform: rotate(-45deg);
104  transform: rotate(-45deg);
105}
106.s_07 .accordion_one .accordion_inner {
107  display: none;
108  padding: 0;
109  box-sizing: border-box;
110}
111.s_07 .accordion_one .accordion_inner .box_one {
112  height: 300px;
113}
114.s_07 .accordion_one .accordion_inner p.txt_a_ac {
115  margin: 0;
116}
117@media screen and (max-width: 1024px) {
118  .s_07 .accordion_one .accordion_header {
119    font-size: 18px;
120  }
121  .s_07 .accordion_one .accordion_header .i_box {
122    width: 30px;
123    height: 30px;
124    margin-top: -15px;
125  }
126}
127@media screen and (max-width: 767px) {
128  .s_07 .accordion_one .accordion_header {
129    font-size: 16px;
130    text-align: left;
131    padding: 15px 60px 15px 15px;
132  }
133}
134
135/*====================================================================
136以下は不要です。
137====================================================================*/
138
139body {
140  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
141  font-size: 16px;
142  letter-spacing: .025em;
143  line-height: 1.8;
144  margin: 0;
145}
146@media screen and (max-width: 1024px) {
147  body {
148    font-size: 14px;
149  }
150}
151.section {
152  max-width: 1024px;
153  margin: 0 auto;
154  padding: 20px 20px 500px;
155}
156.section p._a {
157  font-size: 12px;
158  font-weight: bold;
159  margin: 30px 0 0;
160}
161.section p._a .link {
162  display: inline-block;
163  color: #607D8B;
164  padding-left: 1.3em;
165  text-indent: -1.3em;
166}
167.section p._a .link:before {
168  content: '';
169  display: inline-block;
170  width: 5px;
171  height: 5px;
172  border-top: 2px solid #607D8B;
173  border-right: 2px solid #607D8B;
174  -webkit-transform: rotate(45deg);
175  transform: rotate(45deg);
176  margin-right: 10px;
177}
178
179
180.accordion_header {
181    display: block;
182}
183
184
185input[type=checkbox] {
186	transform: scale(2);
187	margin: 0 20px 0 20px;
188}
189
190.accordion_header checkbox{
191    padding: 12px 16px;
192}
193
194
195#accordion-panel dt {
196  cursor: pointer;
197  margin-bottom: 1px;
198}
199 
200#accordion-panel dd .inner {
201  background-color: #f5f5f5;
202  border: 1px solid #ccc;
203  margin: 3px 0;
204}
205 
206#accordion-panel dd {
207  display: none;
208}
209 
210.layer-1 dt {
211  background-color: #9aabf3;
212  padding: 5px 0;
213  font-size: 1.25em;
214  text-align: center;
215  color: #0d2170;
216}
217 
218.layer-2 dt {
219  background-color: #b8c4f7;
220  padding: 5px 0;
221  font-size: 1.0em;
222  text-align: center;
223  color: #0d2170;
224}
225 
226.layer-3 dt {
227  background-color: #d7defa;
228  margin-bottom: 1px;
229  padding: 5px 0;
230  font-size: 0.8em;
231  text-align: center;
232  color: #0d2170;
233}

JavaScript
1// .s_07 .accordion_one
2$(function(){
3  //.accordion_oneの中の.accordion_headerがクリックされたら
4  $('.s_07 .accordion_one .accordion_header').click(function(){
5    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
6    $(this).next('.accordion_inner').slideToggle();
7    $(this).toggleClass("open");
8  });
9});
10
11$(function (){
12    $('input[name^="parent"]').change(function() {
13        if ($(this).is(':checked')) {
14            $(this).parents('.checkbox').find('input:checkbox').prop('checked', true);
15        }else{
16            $(this).parents('.checkbox').find('input:checkbox').prop('checked', false);
17        }
18    });
19});
20

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

<div class="accordion_header"><input type="checkbox" name="parent">B-1<div class="i_box"><i class="one_i"></i></div></div> この表記を <label class="accordion_header"><input type="checkbox" name="parent">B-1<div class="i_box"><i class="one_i"></i></div></label> という表記にすると「わからないこと」で記述しているようにチェックボックスの選択範囲は広がるがアコーディオンメニューがすぐに閉じてしまう現象が起こります

補足

アコーディオンメニュー及びチェックボックスの挙動につきましてはGoogle検索でテンプレートをコピーし、私なりに組み合わせたものです。コード制作者は異なります。

行動規範の内容に同意します

回答1件

ベストアンサー

labelを用いてチェックボックスの選択範囲を広げると、アコーディオンメニューは開くものすぐに閉じてしまいます。

下記と同じ現象かと思われます。

質問のHTMLで行くなら下記のように.accordion_header のクリック時にチェックを反転させてチェンジイベントを発生させる処理を追加すればいいでしょう。

JavaScript/jQuery
1// .s_07 .accordion_one
2$(function(){
3  //.accordion_oneの中の.accordion_headerがクリックされたら
4  $('.s_07 .accordion_one .accordion_header').click(function(){
5    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
6    $(this).next('.accordion_inner').slideToggle();
7    $(this).toggleClass("open");
8    $(this).find('input[name^="parent"]').prop('checked', function(i, v){return !v}).change();
9  });
10  
11});
12
13$(function (){
14    $('input[name^="parent"]').change(function() {
15        if ($(this).is(':checked')) {
16            $(this).parents('.checkbox').find('input:checkbox').prop('checked', true);
17        }else{
18            $(this).parents('.checkbox').find('input:checkbox').prop('checked', false);
19        }
20    });
21});

css
1.s_07  input[name^="parent"] {
2  pointer-events: none;
3}

上記のリンク先によると、vanillaJSでは発生しないということなので、

<div class="accordion_header"> を <label class="accordion_header"> に変更して、 jQueryからvanillaJSに書き換える方がいいかもしれません。

投稿2024/01/18 06:50

hatena19

総合スコア34367

KAZUKI

2024/01/18 08:05

ご回答ありがとうございます！無事に想定通りの動きになりました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.30%

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

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

質問する

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

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

jqueryを用いたアコーディオンメニューの挙動について

実現したいこと

発生している問題・分からないこと

該当のソースコード

試したこと・調べたこと

上記の詳細・結果

補足

関連した質問