id:tontonpokopoko
tontonpokopoko質問回数41支払い回数38もっと見る
ポイントあり300ptベストアンサーあり
ウェブ制作

JavaScriptで不要な記事を折りたたんでいますが（下記のURLを参考にして）、参考URLのソースコードでは設定の保持はしてくれません。

「return」「false」「true」などをいじってみましたが、どうもうまくいかないので助言がいただきたいのです。よろしくお願いします。

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

回答の条件
  • 1人5回まで
  • 登録：2008/02/18 23:41:02
  • 終了：2008/02/24 22:10:06

ベストアンサー

id:sutara_lumpur No.2

sutara_lumpur回答回数2ベストアンサー獲得回数12008/02/20 02:29:09

ポイント100pt

横レスですが…、

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;

}

}

id:tontonpokopoko

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

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

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

例）

記事1、subjoinder、expander

記事2、subjoinder2、expander2

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

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

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

よろしくお願いします。

2008/02/20 13:15:09

その他の回答（2件)

id:y-kawaz No.1

y-kawaz回答回数1421ベストアンサー獲得回数2262008/02/19 01:01:43

ポイント100pt

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

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

id:tontonpokopoko

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

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

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

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

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

2008/02/19 01:15:11
id:sutara_lumpur No.2

sutara_lumpur回答回数2ベストアンサー獲得回数12008/02/20 02:29:09ここでベストアンサー

ポイント100pt

横レスですが…、

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;

}

}

id:tontonpokopoko

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

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

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

例）

記事1、subjoinder、expander

記事2、subjoinder2、expander2

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

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

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

よろしくお願いします。

2008/02/20 13:15:09
id:sutara_lumpur No.3

sutara_lumpur回答回数2ベストアンサー獲得回数12008/02/21 11:03:01

ポイント100pt

私も現在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ファイルをひとつにまとめるのは難しいでしょうね。

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

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

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

id:tontonpokopoko

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

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

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

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

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

2008/02/21 15:29:19

コメント（9件)

  • id:kazubokkuri
    かずぼっくり 2008/02/21 16:27:12
    >ただダウンロードのページがリンク切れとなっていてアクセスできないようです。
    Yahoo!はこういった直リンを弾くので、一旦クリップボードにコピーして、新しいウィンドウ(タブブラウザの場合タブ)を出してアドレス欄に"貼り付け"るといいかと。
  • id:tontonpokopoko
    tontonpokopoko 2008/02/21 18:52:59
    そうなんですね、助言をありがとうございます。助かりました。
    同様の方法でDLいたしました。現在実験中です。
  • id:sutara_lumpur
    sutara_lumpur 2008/02/22 11:12:48
    >>kazubokkuriさん
    >Yahoo!はこういった直リンを弾く

    知りませんでした…。
    アップロード後に自分で試していれば…。

    サンプルページ内に圧縮ファイルへのリンクを張りました。
    また、Cookie関連の処理を自作した『その２』を追加しました。

    getElementsByClassName()を使うために
    prototype.jsは引き続き読み込む必要がありますが…orz
    この関数を使わずに、折りたたみ可能な記事の数を
    自動的に数える方法ってありませんよね…？
  • id:tontonpokopoko
    tontonpokopoko 2008/02/22 15:07:15
    またまた自作していただいて恐縮です。
    さっそくサンプル1、サンプル2とも試したのですが、折りたたみをクリックすると、読み込み画面がクリックした場所ではなくページの1番上に飛んでしまいます。これだと長いページの下のほうにある個所（折りたたみ）をクリックしたときには、かなりユーザは使いずらいようです。もうすこし試してみます。
  • id:tontonpokopoko
    tontonpokopoko 2008/02/22 15:41:03
    http://jsajax.com/AnimatedCollapsibleDivArticle620.aspx

    こちらを参考に少し試していますが、
    ajaxはhtmlでは正常に動作しないのでしょうか・・
    宣言を
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    から
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    に変えると動作が壊れてしまうようですね・・
  • id:sutara_lumpur
    sutara_lumpur 2008/02/23 10:54:02
    ----------------------------------------------------------------
    ★ページのトップにジャンプしてしまう件について
    ----------------------------------------------------------------

    <a href="#" onclick="expand('open',1);">
    となっている部分に、
    <a href="#expander_1" onclick="expand('open',1);">
    のようにid名を追加すればOKです。

    うっかりしてました…。


    ----------------------------------------------------------------
    ★『JavaScript + Ajax 実践サンプル』の動作について
    ----------------------------------------------------------------

    おそらく、tontonpokopokoさんは『Internet Explorer6』で動作確認を
    なさっているのでは？

    IE6の場合、文書宣言が
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    だけだと、互換モードになってしまいます。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    と記述すれば（標準モード）、IE6でもきちんと動作します。

    ていうか、僕も『標準モードと互換モード』ではさんざん泣かされました…。
  • id:tontonpokopoko
    tontonpokopoko 2008/02/24 22:08:46
    お返事が遅れて申しわけありません。
    今回のことではいろいろと本当に参考になりました。
    標準モードと互換モードについても教えていただき納得しました。
    まだまだ悩みは尽きませんが、少しずつ勉強しようと思います。
    サンプルもありがたく使わせていただきます。
    また違った悩みを投稿の際には是非よろしくお願いします。
  • id:sutara_lumpur
    sutara_lumpur 2008/02/25 09:57:45
    いえ、こちらこそ、今までYahoo!知恵袋を使っていて、
    はてなに移って初めての回答だったので
    『回答』と『コメント』の違いがわからなかったりで
    どきどきしました。

    最後に、僕の技量の範囲でできる限りシンプルにしてみました。
    http://www.geocities.jp/toumin_m7/sample_cookie/sample_3.html

    onclick="expand(1);"
    の部分で、関数expand()に引数を渡さずに、
    class="expander"と指定された要素の中で何番目が
    クリックされたのかを自動的に判別する仕組みを
    考えてみましたが、今の僕の知識では答えが出てきませんでした…。

    今度は僕が質問してみましょうかｗ

    またどこかでお会いしましょう～
  • id:tontonpokopoko
    tontonpokopoko 2008/02/26 16:45:37
    再びありがとうございます。
    サンプル３はものすごくシンプルで使いやすいですね。
    軽量に動く感じが伝わって、好感を持つユーザが多いと思います。

    はてなは私も始めたばかりなのですが、いつもいいサポートをいただいています。
    JavaScriptは今まで派手なアクション、遊び感覚的イメージが強かったのですが、
    うまく利用することでとても有効であることがわかりました。

    いろいろと試していきたいと思います、ありがとうございました！

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ