jQueryのドキュメント折りたたみパネルの値下げを追加

トスHexoのブログは、私はフロントチーフ顧問カイ上司の指示でページを照合ソフトウェアを作り、最終的には折りたたみパネル機能で使用される記事を実現し、以下に報告されています。

我々は全体のステーションは、このような効果を持っているしたいので、それを直接使用しているテーマに統合され、サイトの使用は、他のテーマは、参照のみを目的として、類似していなければならない、モーパッサンのテーマです。

変換のテーマ

新しい定義classやid、そのような私が構築されたものとしてJS、accordion.js次のように読み込み、

1 
2 
3

$（関数（） { 
  $（".accordion"）.accordion（）; 
}）;

場合は<div id=accordion>定義され、その後、必要が変更するには#accordion

1 
2 
3

$（関数（） { 
  $（"#accordion"）.accordion（）; 
}）;

では主题目录/layout/_partial/after_footer.jade背後にある次のコード

1 
2 
3

（REL = 'スタイルシート'、のhref = '//cdn.bootcss.com/jqueryui/1.10.4/themes/smoothness/jquery-ui.css' ）
スクリプト（タイプ= 'テキスト/ javascriptの'、SRC = 「// cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js'）
スクリプト（タイプ= 'テキスト/ javascriptの'、SRC =なurl_for（theme.js） + '/accordion.js' ）

上記のsrc=url_for(theme.js) + '/accordion.js'テーマには、ディレクトリのjsのリリースへの参照ですaccordion.js

折りたたまれた記事を追加`class`

内容を折り畳むことする必要がある<div>だけで、次のように、そのような小見出しの下に隠されるコンテンツとして、それらを参照します

< divの クラス = "アコーディオン" >



xの内容を隠します

##隠されたY

y軸の内容の非表示
</ DIV >を

記事はをクリックして、初期にはコンテンツの最初の部分を開くと拡大していきます。その場合には、テーマで修飾隐藏y他のコンテンツが隠されている一方で、対応する拡張されたコンテンツ。デモを次のように結果があります

X隠します

xの内容を隠します

Yを隠します

内容を隠すY-
</ div>の
ブロック参照のような様々なレベルがある場合h2やh3、混乱になります混合スタイルは、レベルが同じ混乱を持つことができますので、どのように、知りません。

ことに注意してくださいあなたは、テーブルを非表示にする場合値下げ文書編集時に、覚えている<div>それ以外の場合は、マークダウンフォーマットが認識されませんつながる、以下は空白行を残すために。

スタイル改善

直接アプローチの上に、あなたは問題があることがわかります

タイトルとコンテンツの間にギャップがあります
固定ボックスの高さを拡大 - どこに変更するかわかりません
最後に、空白行があります

私たちは、テーマができますstyle.css解決するためにスタイルを追加します

/ *高度に適応テーブル* / 
.accordionの  表 { 高さ：100％ ; } / *空の行は、* /非表示Pを.ui-アコーディオンヘッダ：最終-子供 { 表示：なし;} / * *削除見出しギャップ/ .post .postたContent H2 { マージン：1.4em 0 0em ; }

以前のテーマを直接参照するにはjquery-ui.css、スタイルの束よりも実際に小さい、あなたが直接、自分のニーズにテーマに書く必要の一部を応じて選択することができますstyle.cssが、また、いくつかのアイコンは、利点と欠点をダウンロードする必要が対応するもの。

最終結果を参照してください仲間ソフトウェアの宝庫へ

参考資料

折りたたみパネル（アコーディオン）
ブログを構築Hexo深さの最適化とカスタマイズを使用して

オリジナル：ビッグボックスは、マークダウン文書にjQueryのアコーディオンを追加します