yuu_nkjm blog


2012-12-02(Sun) [長年日記]

[WordPress][JavaScript][jQuery] 見出しを目次にするスクリプト

jQuery Table of Contents Plugin

TOC | jQuery Table of Contents Pluginがなかなか良い感じ.

見出しに番号をつける


<script type="text/javascript">
// h2にナンバリング
jQuery(function() {
    jQuery(".post-entry .chapterize h2").each(function(i) {
         var current = jQuery(this);
         var txt = current.text();
         current.text((i+1)+". " +txt);
     });
});
</script>

見だしを目次にする

h2とh3の入れ子関係の処理はしていない.見出しから目次を自動生成 & クリックで該当位置にスクロール(jQuery使用) | Stack Stack!を参考にカスタマイズした.


<script type="text/javascript">
//TOCの作成
jQuery(function(){
    var elm = jQuery("<ul></ul>");    
    jQuery(".post-entry h2, .post-entry h3").each(function(i) {
      var current = jQuery(this);
      var tagName = current.get()[0].localName;
      if(tagName == "h2"){
          if(current.attr('id') === undefined){
                current.attr("id", "chapter-" + i);
          }
          elm.append("<li><a href=#" + current.attr('id') + ">" + current.text() + "</a></li>");
      } else if(tagName == "h3"){
          if(current.attr('id') === undefined){
             current.attr("id", "subchapter-" + i);
           }
           elm.append("<li style='list-style-type: none;'>  <a href=#" + current.attr('id') + ">" + current.text() + "</a></li>");
    }
    });    
    jQuery(".table-of-contents").append(elm);
    return false;
});

jQuery-Collapse

jQuery Collapse | webcloudを使うことにした.

目次の項目の折りたたみ

現在表示しているページに関するもの以外は,折りたたむ.jQueryで現在のページの所属しているサブメニューを開いた状態にする。 | webOpixeljQueryで現在のファイル名を取得する方法 | PHPサンプル実験室を参考にした.


// TOCの折りたたみ
jQuery(function() {
	var url = window.location;	
	jQuery('ul.nav li a[href="'+url+'"]').parent().addClass('active');
	var path = url.href.split('/');
	var file_name = path.pop();
        file_name = file_name.split('#')[0];
        jQuery(".reference a[href*='" + file_name + "']").addClass("selected-menu");
        jQuery(".reference ol ol:has(a[href*='" + file_name + "'])").addClass("active");
});
</script>

activeクラスで表示を切りかえるCSSを用意しておく.

.reference ol ol{
    display: none;
}
.reference ol ol.active {
    display: block;
}

トップ «前の日記(2012-12-01(Sat)) 最新 次の日記(2012-12-03(Mon))» 月表示 編集 設定
2006|01|06|12|
2007|06|09|
2008|01|03|04|06|07|08|09|10|12|
2009|01|02|05|06|07|08|10|11|12|
2010|03|04|05|06|07|08|09|10|11|
2011|01|02|03|04|05|06|07|08|09|11|12|
2012|01|02|04|06|07|08|10|11|12|
2013|01|02|03|07|08|10|11|12|
2014|01|02|04|05|06|07|08|09|10|11|
2015|01|02|07|11|12|
2016|01|03|05|07|08|09|