« なんだかんだで1000件のアクセス | メイン | さらに開閉できるようにした »

サブカテゴリも開閉できるように変更

Techknow Weblog: サブカテゴリを開閉式にしてみる を参考にして、サブカテゴリも展開/隠蔽できるようにしてみました。
デフォルトですべてを表示するようにしています。それから、見た目はエクスプローラライクにしたつもりです。
(注)カテゴリごとに下線の色を変えたりしているので余計なコードが入っていたりしますが、あえてそのまま記載。

気になる方は「続き」をどうぞ。

カテゴリ一覧

<ul>
<MTSubCategories>
<MTHasNoParentCategory><li></MTHasNoParentCategory>
<MTHasSubCategories>
 <img src="<$MTCGIPath$>images/expand_minus.png" class="expand_sw" title="隠す" onClick="shBlock('category_archive_<$MTCategoryID$>', this, '1');" />
 <MTElse><MTHasNoParentCategory><span style="margin-left: 1.2em;"></span><MTElse>└</MTElse></MTHasNoParentCategory></MTElse>
</MTHasSubCategories>
<MTIfNonZero tag="MTCategoryCount">
 <span class="entry"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>" class="cat<$MTCategoryID$>"><MTCategoryLabel></a></span> [<$MTCategoryCount$>]
<MTElse>
 <span class="entry"><span title="<$MTCategoryDescription$>" class="cat<$MTCategoryID$>"><MTCategoryLabel></span></span>
</MTElse>
</MTIfNonZero><br />
<div class="<MTHasNoSubCategories>no_</MTHasNoSubCategories>sub_category" style="display: block; margin-left: 1.2em;" id="category_archive_<$MTCategoryID$>">
<MTSubCatsRecurse max_depth="3">
</div>
<MTHasNoParentCategory></li></MTHasNoParentCategory>
</MTSubCategories>
</ul>

スタイルシート

/* [+],[?]ボタン */
.expand_sw {
 cursor: pointer;
}

/* カテゴリ別アーカイブ(表示/非表示切替部=サブカテゴリ) */
.sub_category {
 line-height: 150%;
 margin: 2px 0px 10px 0px;
}

.no_sub_category {
}

JavaScript(基本的には前のと同じ) ※このスクリプトではイメージファイルを使うようにしています。

<script language="JavaScript" type="text/javascript">
<!--

/* 続きを読む・隠す */
function shBlock(id, o, s){
// id: 表示・非表示切り替え部の"ID"
//  o: 「this」を指定(ボタン形状を変える)
//  s: ボタンの文字形式指定
//      '1': image file を使用

    var disp = document.getElementById(id).style.display;

    if (disp == "block") {
        document.getElementById(id).style.display = "none";
        if ( s == 1 ) {
            o.src = "<$MTCGIPath$>images/expand_plus.png";
        } else {
            o.innerHTML = "続きを読む";
        }
        o.title = "展開";
    } else {
        document.getElementById(id).style.display = "block";
        if ( s == 1 ) {
            o.src = "<$MTCGIPath$>images/expand_minus.png";
        } else {
            o.innerHTML = "続きを隠す";
        }
        o.title = "隠す";
    }
}

//-->
</script>

開閉できるようにしてみて言うのもナンですが、これこそ「自己満足」ですよね。見に来た人は、まず使わないでしょうから。(^^;;

トラックバック

このエントリーのトラックバックURL:
http://blog.yasuhisa.net/mt/mt-tb.cgi/76

コメント (5)

rung [TypeKey Profile Page]:

突然のコメントで失礼させていただきます。

サブカテゴリーの開閉に関して、大変感銘したので一言お伝えしようと思いました。
(と申しましても当方のサイトはまだ2.661なのですが)

ところで「開く」と「開く」のデフォルトの状態を逆=デフォルトでは全て閉じているにするにはどのようにしたらよいでしょう。

メインページでは閉じた状態になっているので失礼ながらソースを拝見させていただきましたが、よくわからなかったのでどうかご教授願います。

なんだか恐縮です。オリジナルは参照先ですし…。
でも参考にしていただけるようで嬉しいです。

で、修正箇所ですが。「カテゴリ一覧」を修正します。

5行目
・イメージを変更。(この例では「expand_minus.png」→「expand_plus.png」)
・「title="隠す"」→「title="展開"」に変更。

14行目
・「style="display: block;"」→「style="display: hidden;"」に変更。

これで初期表示が「閉」になるかと思います。(確認していませんが)

rung [TypeKey Profile Page]:

早速のご回答大変ありがとうございました。

で、人んちのテストサイトでトライしてみましたが残念ながら上手く行きませんでした。
どうやらサブカテゴリーが複数ある場合、サブカテゴリー名に付くstyleがhiddenのdivに対して/divがない(タグが閉じない)からじゃないかとも思うのですが、原因はよくわかりません。

このあともdiv位置をアッチャコッチャに動かしてちょっとやってみます。

取り急ぎご報告まで。

rung [TypeKey Profile Page]:

何度もスイマセン、divタグ閉じてました、、、
で、hiddenではなく「none」にしたら上手く行ったということをご報告申し上げます。
お騒がせして大変申し訳ありませんでした。

すみませんでした。
JavaScriptのソース見たら一目瞭然で「hidden」ではなく「none」だということが分かるのに…。

まあ、うまくいったようで何よりです。

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

About

2005年02月10日 19:41に投稿されたエントリーのページです。

ひとつ前の投稿は「なんだかんだで1000件のアクセス」です。

次の投稿は「さらに開閉できるようにした」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Movable Type 3.35
Since Oct. 28,2004 / Today / Yesterday