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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

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

jQuery

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

HTML

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

解決済

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

unwind
unwind

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

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

jQuery

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

HTML

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

1回答

0リアクション

1クリップ

551閲覧

投稿2021/10/07 00:41

前提条件・したいこと

  1. 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"のリストのみ並び替えがしたいです。

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

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

問題点

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

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

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

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

ソース

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="all" href="./php_gakushu.css" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <title>テストサイト</title> <body> <div> <ol class="kan_data"> <li>66/1/0/0/1</li> <ol class="sho_data"> <details> <li>69/1/1/0/11</li> <ol class="setu_data"> <details> <li>70/1/1/1/111</li> <li>71/1/1/2/112</li> <li>78/1/1/3/113</li> </details> </ol> <li>72/1/2/0/120</li> <ol class="setu_data"> <details> <li>73/1/2/1/121</li> </details> </ol> <li>83/1/3/0/130</li> </details> </ol> <li>67/2/0/0/2</li> <ol class="sho_data"> <details> <li>74/2/1/0/210</li> <ol class="setu_data"> <details> <li>75/2/1/1/211</li> <li>79/2/1/2/212</li> </details> </ol> <li>80/2/2/0/220</li> <ol class="setu_data"> <details> <li>81/2/2/1/221</li> </details> </ol> <li>82/2/3/0/230</li> </details> </ol> <li>76/3/0/0/300</li> <ol class="sho_data"> <details> <li>77/3/1/0/310</li> </details> </ol> <li>84/4/0/0/400</li> </ol> </div> <script> $('.kan_data').sortable({ update: function() { console.log($(this).sortable("toArray")); $.post("php_gakushu_copy.php", { sort: $(this).sortable("toArray") }, function(data) { $("#log").append('<p>' + data + '</p>'); }); } }); $('.sho_data').sortable({ update: function() { console.log($(this).sortable("toArray")); $.post("php_gakushu_copy.php", { sort: $(this).sortable("toArray") }, function(data) { $("#log").append('<p>' + data + '</p>'); }); } }); $('.setu_data').sortable({ update: function() { console.log($(this).sortable("toArray")); $.post("php_gakushu_copy.php", { sort: $(this).sortable("toArray") }, function(data) { $("#log").append('<p>' + data + '</p>'); }); } }); </script> </body> </html>

試したこと

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

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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"は、節のみの並び替えが出来ればと考えております。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

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

jQuery

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

HTML

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