人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptで不要な記事を折りたたんでいますが(下記のURLを参考にして)、参考URLのソースコードでは設定の保持はしてくれません。
「return」「false」「true」などをいじってみましたが、どうもうまくいかないので助言がいただきたいのです。よろしくお願いします。

http://www.cmehappy.jp/websitetips/expander.html


●質問者: tontonpokopoko
●カテゴリ:ウェブ制作
✍キーワード:JavaScript URL ソースコード
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● y-kawaz
●100ポイント

設定の保持というのは、ページをリロードしたりしても折りたたみの状態が保持されるようにしたいということでしょうか?

でしたらクリック時に Cookie に展開情報が保存されるようにしておき、ページロード時に Cookie から展開情報を取得してその状態になるようexpand関数を実行してやるコードを書くのが普通かと思います。

◎質問者からの返答

返信をありがとうございます。

仰せの通りリロードしたときに状態を保存したいと考えています。

当方まだまだプログラムのスキルが足りないため、

Cookieから関数を利用する方法ついての参考URLがあれば是非教えてください。

よろしくお願いいたします。


2 ● 宮崎雄策
●100ポイント ベストアンサー

横レスですが…、

http://phpspot.org/blog/archives/2006/11/javascriptcooki.html

で紹介されているサンプルとライブラリを流用してはいかがでしょう?

http://www.cmehappy.jp/websitetips/expander.html

のサンプルと合体させるなら以下のような感じで…。

------------------------------------------------------------------------

index.html

------------------------------------------------------------------------

<html>

<head>

<script language="javascript" src="./prototype.js"></script>

<script language="javascript" src="./cookiemanager.js"></script>

<script type="text/javascript" src="expander.js"></script>

<script type="text/javascript">

//★☆★☆★☆追加★☆★☆★☆

//Cookieを読み込む

function test1(){

var manager = new CookieManager();

var URI = manager.getCookie("memo");

if (URI == "") {

URI = "#";

}

expand(URI,'subjoinder','expander');

}

//★☆★☆★☆追加★☆★☆★☆

</script>

</head>

<body onload="test1();"><!--ページ読み込み時に上の関数を呼び出す-->

</script>

<p id="expander">

<a href="#expander"

onclick="expand('#','subjoinder','expander');return false;"

onkeypress="expand('#','subjoinder','expander');return false;">

続きを表示する

</a>

</p>

<div id="subjoinder" style="display:none">

<p id="collapser" >

<a href="#expander"

onclick="expand(0,'subjoinder','expander');return false;"

onkeypress="expand(0,'subjoinder','expander');return false;">

折りたたむ

</a>

</p>

?折りたたみたい内容を自由に記述?

</div>

</body>

</html>

------------------------------------------------------------------------

expander.js

------------------------------------------------------------------------

function expand(URI,SUB,EXP){

if(document.getElementById) {

if(document.getElementById(SUB).style.display) {

//★☆★☆★☆追加★☆★☆★☆

//Cookieに書き込む

var manager = new CookieManager();

manager.setCookie("memo", URI);

//★☆★☆★☆追加★☆★☆★☆

if(URI != 0) {

document.getElementById(SUB).style.display = "block";

document.getElementById(EXP).style.display = "none";

} else {

document.getElementById(SUB).style.display = "none";

document.getElementById(EXP).style.display = "block";

}

} else {

location.href = URI;

return true;

}

} else {

location.href = URI;

return true;

}

}

◎質問者からの返答

返信をありがとうございます。

丁寧な説明をいただき納得する動作が出来ました。

折りたたむ記事を複数設定しているのですが、

例)

記事1、subjoinder、expander

記事2、subjoinder2、expander2

記事2にも同じ動作をさせるにはどのようにすればいいのでしょうか?

また外部ファイルを1つにまとめたのですが、

これはあまりいいことではないのでしょうか?

よろしくお願いします。


3 ● 宮崎雄策
●100ポイント

私も現在JavaScriptを勉強中なので、がんばってサンプルを

作ってみました。

id属性は、expander_1,expander_2…

のように、アンダーバーを入れてください。

無限に増殖可能、だと思います。

サンプル内の部品をコピーしていってください。

サンプルを公開している場所

http://www.geocities.jp/toumin_m7/sample_cookie/

サンプルを一括ダウンロード(ZIP形式)

http://www.geocities.jp/toumin_m7/sample_cookie/sample_cookie.zi...

外部jsファイルをひとつにまとめるのは難しいでしょうね。

全て自分で書き起こすことになるんじゃないでしょうか…。

ただ、クッキーを操作するのはけっこう簡単ですよ。

明日時間があれば、僕も挑戦してみます。

◎質問者からの返答

返信をありがとうございます。

わざわざサンプルを作っていただいたようで恐縮です。

ただダウンロードのページがリンク切れとなっていてアクセスできないようです。

クリックするとカチッと音がするのはJavaScript特有なものですか?

Ajaxを利用するのが今後の主流なのでしょうか・・

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ