アコーディオン表示に制限を設けて表示しないようにしたい

前提

HTMLにて、アコーディオンメニューを実装しています。
実装自体はできたのですが、AAA階層にあるDDDの中の表示を押すと、FFFがクリックできなくなる（FFF階層を開くことが不可能になる）状態にしたいです。
ご教授お願い致します。

実現したいこと

AAA階層にあるDDDの中の表示を押すと、FFFがクリックできなくなる（FFF階層を開くことが不可能になる）状態にする

該当のソースコード

HTML
1
2<head>
3    <meta charset="utf-8" />
4    <title>test</title>
5
6    <link rel="stylesheet" href="http://static.jstree.com/latest/assets/dist/themes/default/style.min.css" />
7    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
8    <script src="http://static.jstree.com/latest/assets/dist/libs/jquery.js"></script>
9    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
10    <style>
11    .wrap{
12    width: 800px;
13    padding: 10px 20px;
14    border: 1px solid #000;
15}
16h3.open_h3{
17    border-bottom: 1px dotted #a9a9a9;
18    cursor: pointer;
19    margin: 0;
20}
21.open_h3:after, 
22.open_h3.active:after {
23    font-size: 22px;
24    margin-left: 20px;
25}
26.open_h3.active::after {
27    content: "▲";
28}
29.open_h3::after {
30    content: "▼";
31}
32.info{
33    font-size: 13px;
34}
35
36
37    </style>
38</head>
39<body>
40<div class="wrap">
41  <h3 class="open_h3 btn-7">ＡＡＡ</h3>
42  <div class="open_parent open-7">
43  
44  
45    <h4 class="open_h3 btn-7">ＢＢＢ</h4>
46  <div class="open_parent open-7">ＣＣＣ
47  <div style="text-align: right">
48    <button>表示</button>
49    </div>
50  </div>
51
52  <h4 class="open_h3 btn-7">ＤＤＤ</h4>
53  <div class="open_parent open-7">
54  <input type="text" width="100px"></input>
55    <div style="text-align: right">
56    <button>表示</button>
57    </div>
58  </div>
59 </div>
60  <h3 class="open_h3 btn-7">ＦＦＦ</h3>
61  <div class="open_parent open-7">
62  
63  
64    <h4 class="open_h3 btn-7">ＧＧＧ</h4>
65  <div class="open_parent open-7">ＨＨＨ
66  <div style="text-align: right">
67    <button>ＩＩＩ</button>
68    </div>
69  </div>
70
71  <h4 class="open_h3 btn-7">ＪＪＪ</h4>
72  <div class="open_parent open-7">
73  <input type="text" width="100px"></input>
74  </div>
75  
76  
77
78  </div>
79</div>
80</body>
81</html>
82
83<script>
84    $(function () {
85    $('.open-7').hide();
86    $('.btn-7').click(function () {
87        $(this).next('.open-7').slideToggle('slow').siblings('.open-7').slideUp('slow');
88        $(this).siblings('.btn-7').removeClass('active');
89        $(this).toggleClass('active');
90    });
91
92    });
93</script>

なにか情報不足なところがございましたらご連絡ください。

jimbe

2022/09/15 02:33

どの辺が java でしょうか。 java と javascript は違うモノです。

退会済みユーザー

2022/09/15 02:41

これはこれは初心者な身でして、違いもわからず追加してしまいました。大変失礼いたしました(;´･ω･)

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

回答1件

ベストアンサー

まず、DDDがFFFに影響を与えるということであれば、それぞれを特定しないといけません
仮に以下とします

HTML
1  <h4 class="open_h3 btn-7" id="ddd">ＤＤＤ</h4>
2・・・
3  <h3 class="open_h3 btn-7" id="fff">ＦＦＦ</h3>

その上でjsはこうします

javascript
1$(function () {
2  $('.open-7').hide();
3  $(document).on('click','.btn-7:not(.unopenable)',function () {
4    $(this).next('.open-7').slideToggle('slow').siblings('.open-7').slideUp('slow');
5    $(this).siblings('.btn-7').removeClass('active');
6    $(this).toggleClass('active');
7    $('#fff').toggleClass('unopenable',$('#ddd').is('.active'));
8  });
9});
10