Q&A前提・実現したいこと
まさに表題の通りになりますが、adminLTEのサイドバーを、コンテンツの動的ロード後に折り畳みたいのです。
発生している問題・エラーメッセージ
エラーメッセージは出ません。 下記のスクリプトによって処理は可能ですが、動的ロード後に必ず「サイドバー以外でのクリック」を行わないと、サイドバーが折り畳まりません。 サイドバー以外で１回クリックすると折り畳まれますが、利用者にとってはこの１クリックも煩わしいと感じることでしょう。
該当のソースコード
<head> ... <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.1.0/css/adminlte.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <!- adminlteのメニューバーをデフォルトで折り畳み --> <body class="sidebar-mini layout-fixed sidebar-collapse"> ... <li class="nav-header"></li> <li class="nav-item has-treeview "> <a class="nav-link " href="#" ><p>データ</p></a> <ul class="nav nav-treeview"> <li class="nav-item"> <a class="nav-link dynamicGet " href="#" data-url="XXXXXXXX"> <p>データ１</p> </a> </li> ... <!- jQueryによって動的にコンテンツをロード --> <div id="mainContent" class="container-fluid"></div> ... <script> //コンテンツの動的ロード $(document).on ("click", ".dynamicGet", (event) => { $.get($(event.currentTarget).data ("url"), (content) => { $('#mainContent').html (content); ★ $('#mainContent').trigger("click"); }); }); </script> </body>
試したこと
上記コードで「★」以外の部分はすべてうまく動作しています。
「サイドバー以外でクリック」すれば、ブラウザ上ではサイドバーが折り畳まれるので、★にあるようなjQueryでの強制クリックを入れ込んでみましたが、上手く行きませんでした。
下記のサイトで、adminLTEのサイドバーを折り畳むメソッドやイベントも試しましたが、、恐らく動的にコンテンツを読み込むことには対応しきれておらず、全く反応しませんでした。
https://adminlte.io/docs/3.0/javascript/push-menu.html
どうにかして、サイドバー以外で物理的なクリックを発生させるか、もしくはadminLTEにて動的コンテンツロード後に折り畳むようにしたいのですが、、そのようなことは可能なのでしょうか？？
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
自己解決
原因はよくわからなかったのですが、、HTMLやjQueryスクリプトをちょこちょこ直しているうちに動くようになりました。
お騒がせいたしました m(_ _)m
投稿2021/07/22 13:12
総合スコア22
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。