目次(クリックでジャンプ)
アルファ
準備
子テーマの「java-script.js」にjQueryを<scripy></script>無しで記述。
現物
文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。
この部分を閉じる。この部分を閉じる。この部分を閉じる。
この部分を閉じる。この部分を閉じる。この部分を閉じる。この部分を閉じる。この部分を閉じる。
この部分を閉じる。
文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。文章の地の部分。
結果
jQueryの動き自体はついたようだ。
が全体を<section>で囲んだ場合、テキスト編集画面で2行改行しても、sect自動で<p>がつかないので、初期状態がdisplay:none;にならない。
全体を<div>で囲むと<p>がついて、思い通りの動作をしてくれるが、テキスト画面に<div>があふれるのが困る！結びにフッターがあるから、何となく分かりそうだが。
再テスト
中に図を入れてみる
地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。
styleでposition:absolute;を設定し、上はtop:0;left:0;を、下はbottom:0;right:0;を設定
画像の内容や位置を含めてCSSに記述しておけば、htmlではクラス指定したdivをおけば良いだけで、大きさや位置の変更はインラインで行えるし、一番自由が効くやり方。
地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。地の文。
結果
図が全部消えてしまう。よく見るとD-box1は現れているので、D-box1の中身がjQueryでtoggleされていないようだ。
初期が閉じた状態になるのは、CSSで「.P-dwn1 *{}」と記述してプルダウンの子要素をdisplay:none
;にしていた(つもりだったが)、子要素以下(孫もひ孫も)全部をdisplya:none;にしていた。
jQueryの方は、直接の子しかtoggleできないので、D-box1の中身は消えたままだったと。
CSSでの指定を「.P-dwn1 *{}」から「.P-dwn1 > *{}」に変えて、解決♪