ランダムの備忘録

ブログをやってて覚えた過程を忘れないために!

HTMLで折りたたみメニューを!

折りたたみ・・・便利だよね。多くなればなるほどに!

最近手製のサイトマップを作成して思ったのはこれないと多すぎて見にくいってこと。

そんなわけで奮闘記を!

始まり

サイトマップ作るぜ~?・・・ちょっと多すぎて見にくいわ!

そういや他のサイトでよく見る押すといっぱい出てくる収納されてるやつ便利そう!

折りたたみか。どんなコードでも使いこなしてみせるぜ!

そう、全ての始まりはここからだった!

調べて出てくるやつ

2種類出てくるんだけど使えたのは1つ。しかも問題付き!

最初のコードに「div onclick」って書いてるやつは機能しなかった

はてなブログだけなのか分からないけど機能しないのなら次!

問題付きの2つ目は・・・

<details>
<summary>表に出る部分</summary>
折り畳まれる部分
</details>

こいつは機能する。が、なぜか</details>の上下に<p> </p>がに強制的に入る

(終わりにこれを使ったおみくじを作ったよ)

さらにHTML編集を更新する度に増殖する

さらにさらにこいつを挟んで文章を書くと大変な事になる。

連続させた時は</details>の一番上と下に入るだけなんだが・・・


例(HTML編集)

<details>
<summary>〇〇〇</summary>
●●●
</details>

<p>折って畳んで最高だ!</p>

<details>
<summary>〇〇〇</summary>
●●●
</details>


こんな感じにすると</details>の上下に1つずつ、計4つも割り込んでくる

そしてそれはHTML編集を更新する度に増殖を加速させる!

増殖を止める方法が分からない・・・

結論

更新しなけりゃ増えないで使えるんだからそれでいいや!

サイトマップで使う分には毎回ちょっと消すだけ。面倒だが。

使わないなんて選択肢はすでに無いに等しいからね!

終わりに

奮闘すること数時間。やはり素人には辛い部分がある。

だけどやらないよりはやった方が楽しい。奮闘記録は記憶に残るからね。

そういや折りたたみをここで実装してないや!

ってことで最後におみくじでも(笑)

 

何が出るかな?吉?駄目だ!下2つから再度選ぶんだ!
何が出るかな?これが私の実力だ!大吉!
何が出るかな?中吉?認めん!上の2つから再度選ぶんだ!

 

もちろん更新すれば<p></p>は増殖するのであった・・・

誰か増殖を止める方法を教えてくれー!