yuu_nkjm blog

[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で現在のページの所属しているサブメニューを開いた状態にする。 | webOpixel，jQueryで現在のファイル名を取得する方法 | 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;
}