リストグループの並び替えをしたいです。リストの入れ子の親部分にdetailsタグを入れて、リストの文字を折り畳みメニューにしたいです

前提条件・したいこと

Sortableを使って、

　番号リストclass="kan_data"のリストは、class="kan_data"に含まれる
class="sho_data"とclass="setu_data"
のリストをグループとしてリストの並び替え
class="sho_data"のリストは、class="sho_data"に含まれるclass="setu_data"
をグループとしてリストの並び替えclass="setu_data"のリストは、
class="setu_data"のリストのみ並び替えがしたいです。

detailsタグを用いて、class="kan_data"はclass="kan_data"のリスト一つ一つの

　折り畳みを。class="sho_data"はclass="sho_data"のリスト一つ一つの折り畳みをしたいです。

問題点

Sortableを用いても、class="kan_data"のリストでは、class="kan_data"のみの並び替え

　 class="sho_data"のリストでは、例えば該当するクラスの中でのclass="sho_data"のリストの
並び替え。
class="setu_data"のリストでは、例えば該当するクラスの中でのclass="setu_data"のリストの
並び替えしかできません。

olタグのスタートタグの後とエンドタグの前にdetailsタグを入れて、リストを

　 detailsタグで折り畳みしようとしても、そのリストの部分がdetails化されません

ソース

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <link rel="stylesheet" type="text/css" media="all" href="./php_gakushu.css" />
9  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
10  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
11  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
12  <title>テストサイト</title>
13
14
15<body>
16  <div>
17    <ol class="kan_data">
18      <li>66/1/0/0/1</li>
19      <ol class="sho_data">
20        <details>
21          <li>69/1/1/0/11</li>
22          <ol class="setu_data">
23            <details>
24              <li>70/1/1/1/111</li>
25              <li>71/1/1/2/112</li>
26              <li>78/1/1/3/113</li>
27            </details>
28          </ol>
29          <li>72/1/2/0/120</li>
30          <ol class="setu_data">
31            <details>
32              <li>73/1/2/1/121</li>
33            </details>
34          </ol>
35          <li>83/1/3/0/130</li>
36        </details>
37      </ol>
38      <li>67/2/0/0/2</li>
39      <ol class="sho_data">
40        <details>
41          <li>74/2/1/0/210</li>
42          <ol class="setu_data">
43            <details>
44              <li>75/2/1/1/211</li>
45              <li>79/2/1/2/212</li>
46            </details>
47          </ol>
48          <li>80/2/2/0/220</li>
49          <ol class="setu_data">
50            <details>
51              <li>81/2/2/1/221</li>
52            </details>
53          </ol>
54          <li>82/2/3/0/230</li>
55        </details>
56      </ol>
57      <li>76/3/0/0/300</li>
58      <ol class="sho_data">
59        <details>
60          <li>77/3/1/0/310</li>
61        </details>
62      </ol>
63      <li>84/4/0/0/400</li>
64    </ol>
65  </div>
66  <script>
67    $('.kan_data').sortable({
68      update: function() {
69        console.log($(this).sortable("toArray"));
70        $.post("php_gakushu_copy.php", {
71            sort: $(this).sortable("toArray")
72          },
73          function(data) {
74            $("#log").append('<p>' + data + '</p>');
75          });
76      }
77    });
78    $('.sho_data').sortable({
79      update: function() {
80        console.log($(this).sortable("toArray"));
81        $.post("php_gakushu_copy.php", {
82            sort: $(this).sortable("toArray")
83          },
84          function(data) {
85            $("#log").append('<p>' + data + '</p>');
86          });
87      }
88    });
89    $('.setu_data').sortable({
90      update: function() {
91        console.log($(this).sortable("toArray"));
92        $.post("php_gakushu_copy.php", {
93            sort: $(this).sortable("toArray")
94          },
95          function(data) {
96            $("#log").append('<p>' + data + '</p>');
97          });
98      }
99    });
100  </script>
101</body>
102
103</html>

試したこと

olタグの外にdetailsタグを入れましたが、詳細という折り畳みが表示されるだけでした。
olタグのclassタグをnameタグにしましたが、nameタグだとname="sho_data"の中の

　 name="setu_data"も一緒くたになり、name="setu_data"のところが選択できませんでした。

皆様方のお力をお借りできればと思います。お手数ですが、宜しくお願い致します。

yambejp

2021/10/07 01:06

ごめんなさい具体的にどうかどうなればよいのでしょうか？

unwind

2021/10/07 01:19

yambejp様。コメント頂き、ありがとうございます。 detailsタグの表示に関しては、"kan_data"のリストを基にすると、 ▼ 1. 66/1/0/0/1 (<li>66/1/0/0/1</li>) ▼ 2. 67/2/0/0/2 (<li>67/2/0/0/2</li>) ▼ 3. 76/3/0/0/300 (<li>76/3/0/0/300</li>) ▼ 4. 84/4/0/0/400 (<li>84/4/0/0/400</li>) という風に、<li>タグのところでdetailsタグの折り返しが表示出来ればと考えております。 Sortableを使った並び替えについては、class="kan_data"は、並び替えしたい巻の中の章節全部も一緒に並び替え。class="sho_data"は、並び替えしたい章の中の節全部も並び替え。class="setu_data"は、節のみの並び替えが出来ればと考えております。

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

回答1件

ベストアンサー

<ol>要素の子は0個以上の<li>要素です。<ol>や<details>を入れることはできません。
<details>が閉じているときに表示されるものを指定するには、<summary>を使います。

以上を踏まえると、下記のようなマークアップになります。

html
1<ol class="kan_data">
2  <li><details><summary>66/1/0/0/1</summary>
3    <ol class="sho_data">
4       <li><details><summary>69/1/1/0/11</summary>
5         <ol class="setu_data">
6           <li>70/1/1/1/111</li>
7           <li>71/1/1/2/112</li>
8           <li>78/1/1/3/113</li>
9         </ol>
10       </details></li>
11       <li><details><summary>72/1/2/0/120</summary>
12         <ol class="setu_data">
13           <li>73/1/2/1/121</li>
14         </ol>
15       </details></li>
16       <li>83/1/3/0/130</li>
17    </ol>
18  </details></li>
19</ol>