![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
JavaScriptで開閉式をページ内の通常のHTMLタグにするにはどうしたらいいでしょうか?
この目次を作るJavaScriptですが右上の目次を押すと開閉します。
http://www.skuare.net/test/jToc.html
これを開閉式ではなく、通常のHTMLファイルのように任意の位置にタグが生成されるようにしたいのですがどこを変更すればいいでしょうか?
http://www.skuare.net/test/js/jquery.jqTOC.js
よろしくお願いいたします。
この質問に補足する
No.1ベストアンサー
- 回答日時:
jsファイルの内容は見てませんが…
◇方法1
jsの内容を解析して、自分の利用しやすいようにカスタマイズする。
◇方法2
ご質問の内容程度であれば、まず、もともとの機能にある、tocAutoClose、tocShowOnClickをoffに指定することで開閉しなくなります。
さらに、目次部分はdiv id="toc_container"としてposition:absoluteで追加されているみたいですから、一旦、目次を作成させておいて、後からdiv全体を好きな位置に移動させてしまうということにすれば、方法1のような解析やカスタマイズが不要になると思われます。
例えば、表示したいところに
<div id="box_for_toc"></div>
を置いてあるとして、
$("#toc_container").css("position", "static");
$("#box_for_toc").append($("#toc_container"));
で、そのdivの中に目次が移動します。
大元の配布元は(オプション設定なども)こちら
http://solidgone.org/Jqtoc
ところで、『 この質問に補足する 』ってなあに?
この回答への補足
ご回答ありがとうございます。
開閉しないでロードしたときに最初からずうっと表示させたままにすることや好きな位置に表示することは出来たのですが、
その方法の表示位置指定だと、いちいちpaddingのtopやleftといったもので表示位置をピクセル指定しないといけないので汎用性が悪くなり、変更したいと思っています。
たとえば、ページによってヘッダーに大きな画像をせたりした場合は重なって汎用性が低くなります。
たとえば、先のサンプルサイトでスタイルシートにpadding-topを100pxにしたら、100ピクセル下に表示されますが、それだとコンテンツの量が変わっても必ず上から100ピクセル下に目次が表示されます。
本文の場合は相対的にヘッダーの分量により、位置が自動的に変わります。それと同じようにしたいです。
また広告がつくサイトの場合は、その広告の位置によってヘッダーのサイズが変わって絶対位置指定している目次と重なったりします。
ページの分量自体は個々のページによって変わってくるので絶対位置では困ります。
絶対位置指定になってしまう問題は見る人の画面のサイズによってオートセンタリングしたい場合も絶対位置なので必ずピクセルで指定した決まった位置になるのでセンタリングができません。
初期のように絶対位置指定しかできないのではいちいちコンテンツが変わる度にピクセルで位置を指定の設定をしなければならないので、使い勝手が悪いです。
そこで本文と同じようにヘッダーの量が変われば自動的にtopの位置も変わるようにしたいのです。別のWindowが重なるのではなく、本文と同じようにひとつのHTMLファイルにインクールドさせるのと同様にしたいです。
3カラムのナビにして、そのうち右の指定したdivの位置に目次が表示させるように変更したいです。その方法ならすべて絶対位置による不具合が解決できるためです。
いちいちピクセルで表示位置を指定する場合は汎用性が悪すぎてページごとにスタイルシートを設定しなければならなくなり困っております。
そこで別のWindowが重なるのではなく、本文と同じようにインクルードするような形に変更したいです。その場合だとページの量に関係なく、位置が調整されて使い勝手が良いです。
そういう方法に変更は可能でしょうか?
よろしくお願いいたします。
No.2
- 回答日時:
#1です。
補足の意味がつかめません。
ソース中の指定div内(divでなくてもいいけど)に移動させる方法として、回答したつもりですけど?
>そういう方法に変更は可能でしょうか?
どこが違うのかわかりません。
目次は指定divの中に入れてしまうので、指定divのレイアウトに従います。
そのdivをどのようにレイアウトさせるのかは質問者様が決めることなので、私には想像ができません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- 車検・修理・メンテナンス ドアの開閉具合について。 4 2022/04/28 22:49
- Excel(エクセル) デスクトップのエクセルで作成したファイルを開くと未記入のエクセルが開く 5 2022/08/17 15:55
- 冷蔵庫・炊飯器 冷蔵庫の扉 開閉度が知りたい 5 2022/10/16 09:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- その他(セキュリティ) 詐欺メールのURLをクリックしてしまった 3 2022/11/01 19:11
- Chrome(クローム) タスクバーにローカルのhtmlのリンクをchromeで留めてダブルクリックして使うことできますか? 1 2023/08/26 18:13
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptのinnerHTMLの挙動に...
-
jqueryを使ったスムーススクロ...
-
CSSでreadonlyの機能はあり...
-
JavascriptのHTMLクラス表示に...
-
jQueryのSlickで矢印アイコンが...
-
javascriptでcssを書き換える方法
-
特定の条件のHTML要素を一括で...
-
jQuery 画面サイズにスライド画...
-
時間帯によってclass名を変更し...
-
ポップアップのリンク先と閉じ...
-
ホームページ上の文字の色を変...
-
確認ダイアログを次からは表示...
-
2回目以降のページロード時には...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
エクセルVBAで、MsgBox やInput...
-
CloseとDisposeの違い
-
Excelシート上のマクロを登録し...
-
「PC Helpsoft Driver Updated...
-
VBAでループ内で使う変数名を可...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
動画の上に広告をオーバーレイ...
-
CSSでreadonlyの機能はあり...
-
jQueryでのドラッグアンドドロ...
-
formのsubmitを押すとモーダル...
-
Q&A掲示板の入力フォームに文字...
-
jqueryを使ったスムーススクロ...
-
確認ダイアログを次からは表示...
-
javascriptで複数の表示・非表...
-
javascriptのエラーで質問です。
-
特定の条件のHTML要素を一括で...
-
macかwinか判別しスタイルシー...
-
【JavaScript】検索がヒットし...
-
jQueryのSlickで矢印アイコンが...
-
javascriptでの(-)ハイフンの処...
-
クリックすると、色が変わるよ...
-
時間帯によってclass名を変更し...
-
フォームで「パスワード(確認...
-
3重のクォーテーション
-
SITEINFOの書き方について
-
【至急!!】Jqueryを使った下記...
おすすめ情報