jQuery1.4.2、jQueryUI1.8.4、toggle()の

質問

jQuery1.4.2、jQueryUI1.8.4、toggle()の状態を初期化

jQuery1.4.2、jQueryUI1.8.4にて、
toggle()を使用したあと、別のボタンなどで、そのtoggleの状態を初期化することは出来るのでしょうか。

<a id="button">ボタン</a>
<div id="info">
<a id="close">閉じる</a>
<p>あいうえお</p>
</div>

<script>
$('#button').toggle(
function(){$('#info').show('slide')},
function(){$('#info').hide('slide')}
);
$('#close').click(function(){$('#info').hide('slide');});
</script>

「ボタン」を押して#infoを表示した後、「閉じる」を押して非表示にし、
もう一度「ボタン」を押すと、hide()が実行されてしまうため、このときにshow()が実行されるようにしたいのです。

フラグを使って.click()で切り替えれば作れますが、
せっかくtoggle()のようなメソッドがあるなら、それを利用できないかと思ったのですが。

回答No.1

fujillin · ベストアンサー

jqueryはよく知りませんが…
以下で実現できませんか？

$("#button").click(function() {
$("#info").toggle("slide");
});
$("#close").click(function(){
$("#info").hide("slide");
});

お礼

なるほど、難しく考えすぎてた様ですね。
ありがとうございました。

補足

最初の質問を投稿した後、いろいろ調整していて、表示と非表示のイフェクトを変えられると言うことに気づき、
これは面白そうだと言うことで、できればtoggle(func1, func2)の方を優先したいと思います。

回答No.10

think49

質問内容はわかりました。

> ただ、自分が作ったコードが一番わかりやすいですから、私が作ったコードの改編で出来ればそれがベストではあります。
その場合、既に #2 のお礼にあるコードで解決できているように思えるのですが、他に質問を継続する理由があるのでしょうか？

お礼

質問を継続すると何か問題があるのでしょうか。

回答があればその回答に対して補足などが続けて投稿されることもあるかもしれませんし、
他の方から何かのプラグインを見つけた、こんな書き方がある、等の情報をもらえるかもしれません。
そのため、解決した後でも１週間から２週間前後、締め切らずに残しています。

回答No.9

think49

横道に逸れた内容を長々と続けて申し訳ありませんでした。

ただ、私としてはどの辺から「横道に逸れた」のか判断が出来ずにいます。
当初の質問内容「toggle()を使用したあと、別のボタンなどで、そのtoggleの状態を初期化することは出来るのでしょうか。」に対する直接的な回答としては #2 しか出ていないように思います。

・「代替案を掲示すること」で横道に逸れたのか。
この場合、#1 の回答も横道に逸れたといえます。

・「回答ではなく意見を出すこと」で横道に逸れたのか。
talooさんは私の回答に対してtalooさん自身の意見を明確かつ詳細に出されていましたので、意見を返すことも期待していると認識していました。

#8 のコードですが、質問内容が書かれていないのでどのように返答していいか判断できません。
質問当初の「toggle()を使用したあと、別のボタンなどで、そのtoggleの状態を初期化することは出来るのでしょうか。」から判断すると、自分で toggle() を作っているので横道に逸れているように思えますが、これは許容範囲なのでしょうか。
ここで勝手に質問内容を想像して回答しては、同じ過ちを繰り返すかもしれませんので、現段階での質問内容を明確にしていただけると有り難いです。

補足

--------------
jQueryを使用して、「ボタン」を押してポップアップを表示した後、「ボタン」をもう一度押すとポップアップを閉じる。
それ以外に「閉じる」ボタンを押してもポップアップを閉じる。

という風にするにはどうすればいいですか？
--------------

と、質問すれば良かったのでしょうか。

これだけの質問では「自分で作ったコードはどうなっていますか？」という返事が来るのがオチだと思いますから、自分のコードを提示したわけですが、
toggle()を使うことが目的ではなく、ポップアップの操作をすることが目的です。
わかりにくい文章で申し訳ありません。

私のコードの改編でできればそれで良し（自己解決したNo.2お礼のコード）、
私のコードではほぼ不可能、またはかなり複雑になるというのであれば、No.1のような方法やNo.2の方法
もしくはプラグインを使った方法（プラグインがなさそうなので自作したNo.8お礼のコード）でも良しです。

ただ、自分が作ったコードが一番わかりやすいですから、私が作ったコードの改編で出来ればそれがベストではあります。

回答No.8

think49

#2～7 です。
以下、#7 より引用します。

> ブラウザは要素に未定義の属性を検知したらそれを無視するので、
HTML4.01 では、UAが認識できない属性を無視することを推奨しています。

---
B.1 不正文書に関する注意

本仕様書は、適合ユーザエージェントが一般的 エラー状態をどのように扱うべきかについて、本仕様が定義していない要素・属性・実体などに遭遇したケースの処理も含め、何らの規定も行わない。
しかし、様々なHTMLバージョンの実装間での実験及び相互運用性を促進するため、次の動作を推奨する。

・認識できない属性があった場合、ユーザエージェントは、当該属性定義全体(すなわち、属性とその値)を無視しなければならない。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#h-B.1
---

---------
ある方に指摘を頂いたのですが、「スキーマの話なのか」「DOMの話なのか」あるいは、「HTML4.01 を前提としているのか」「HTML5 を前提としているのか」などなど、いくつかの点で話が微妙に噛み合ってない印象は私も持っています。
下記URLで非常に詳しい指摘があり、参考になるのではないかと思います。
http://d.hatena.ne.jp/babu_babu_baboo/20100825#c1282730710

---------
#7 の info.get(0).style.display === 'none' は .css(propertyName) を使えばもっと短く書けたので修正。
ついでに、jQuery を使わないコードに直すとメモリリークパターンになる問題にも対応しました。
# jquery-1.4.2.js は window unload 時に後始末をしてくれるので、jQuery を利用している限りは考える必要はないのですが、あまり良い作法ではないので。

(※以下、全角空白は半角空白に置換してください)

<script type="text/javascript"><!--
jQuery(function ($) {
　$('#button').click(function (event) {
　　var info = jQuery('#info');
　　info.css('display') === 'none' ? info.show('slide', {}, 500) : info.hide('drop', {}, 500);
　});
　$('#close').click(function (event) {
　　var info = jQuery('#info');
　　if (info.css('display') !== 'none') info.hide('drop', {}, 500);
　});
　$('#info').hide('drop', {}, 500);
});
//--></script>

お礼

JavaScriptが「HTML専用の言語」として作られていたことも原因の一つにあると思います。
formなどはHTMLでしか使いませんし、改めてDOMの仕様を読んでみると、HTML/XHTMLのみ特別扱いしているようです。
Web APIでも、HTML（特にHTML5）が前提になっているようですし、DOMでありながらHTMLの話だとか、どっちつかずな内容が多いんじゃないでしょうか。

横道にそれるのはスレッド汚しと考えています。
できれば避けていただきたいと思いますし、必要があれば新規にスレッドを作成していただければ幸いです。

// プラグイン登録、jquery coreのtoggle()をベースとして使用
(function() {
jQuery.fn.mytoggle = function(fn){
　　var args = arguments, i = 1;
　　if((args.length>=2) && typeof(args[1])=='number'){
　　　if(typeof(args[2])==='function'){
　　　　args[2]();
　　　}else if(typeof(args[2])==='number'){
　　　　jQuery.data( this.get(0), "myLastToggle" + fn.guid, args[2] );
　　　　jQuery(this.get(0)).triggerHandler('click');
　　　}
　　　jQuery.data( this.get(0), "myLastToggle" + fn.guid, args[1] );
　　　return true;
　　}

　　while ( i < args.length ) {
　　　jQuery.proxy( fn, args[ i++ ] );
　　}
　　this.click( jQuery.proxy( fn, function( event ) {
　　　var myLastToggle = ( jQuery.data( this, "myLastToggle" + fn.guid ) || 0 ) % i;
　　　jQuery.data( this, "myLastToggle" + fn.guid, myLastToggle + 1 );
　　　event.preventDefault();
　　　return args[ myLastToggle ].apply( this, arguments ) || false;
　　}));

　　return fn;
　};//
})(jQuery);

// 使用 onload、$(document).ready()など
window.onload=function(){
var fns=[
// 表示ボタンにイベントを登録
　　$('#button-1').mytoggle(
　　　function(){$('#menu-1').show('slide', {}, 500);},
　　　function(){$('#menu-1').hide('blind', {}, 400);}
　　),
　　$('#button-2').mytoggle(
　　　function(){$('#menu-2').show('slide', {}, 500);},
　　　function(){$('#menu-2').hide('blind', {}, 400);}
　　)
　];

// 非表示ボタン
　$('#menu-1 .cancel').click(
　　$('#button-1').mytoggle(fns[0], 0, function(){$('#menu-1').hide('drop', {}, 300);});
　);

// 第３引数に数字を渡せば、表示ボタンの時の引数の関数と同じ処理ができる
　$('#menu-2 .cancel').click(
　　$('#button-2').mytoggle(fns[1], 0, 1);
　);

};//onload

詳しくデバッグ等していません。
・thisの扱いは結果オーライです。
・mytoggle初期化時の第三引数で.hide('drop')を使用すると、IE8でopacityが0のままになるのを確認しました。

mytoggle設定時の第一引数＝jQuery.data()の第二引数の扱いと、
mytoggleの初期化時に使用する第三引数の扱いをどうするか迷っていますが。

コードの著作権放棄、またはMIT、GNU GPLにて。

補足

初期化処理の方に、function(){}を入れるのを忘れていました。

// 非表示ボタン
　$('#menu-1 .cancel').click(
　　function(){
　　　$('#button-1').mytoggle(fns[0], 0, function(){$('#menu-1').hide('drop', {}, 300);});
　　}
　);

// 第３引数に数字を渡せば、表示ボタンの時の引数の関数と同じ処理ができる
　$('#menu-2 .cancel').click(
　　function(){
　　　$('#button-2').mytoggle(fns[1], 0, 1);
　　}
　);

初期化処理（非表示ボタンの設定）の第一引数はトグル設定（最初の.mytoggle()）の戻り値です。
第二引数はトグル設定の何番目にセットするか、です。

表示・非表示をサンプルにしていますが、.css()で色を変えるとかもできるはずですので、
赤->黄->青->黒でtoggleさせて、
キャンセルボタンを押すと次のtoggleは赤から始める、黄から始めるなどの指定が出来ると思います。

> ・mytoggle初期化時の第三引数で.hide('drop')を使用すると、IE8でopacityが0のままになるのを確認しました。
どうやら.hide('drop')か.show()にバグがありそうな気がします。

回答No.7

think49

横道に逸れてますね。
ごめんなさい、私は jQuery の話は余り出来ないので、jQuery寄りの回答は他の方にお任せです…。
# でも、実は talooさん もこういう話が好きなのではないかという気がしていたり。

> 都合って言うか、はっきり言えば、それってただの車輪の再発明だと思いますので。
うーん…。「質問内容にあるコードだけ」ならそれほど大それたコードにはならないんじゃないでしょうか。

<script><!--
jQuery(function($) {
var button = $('#button'), info = $('#info'), close = $('#close');
button.click(function () { info.get(0).style.display === 'none' ? info.show('slide', {}, 500) : info.hide('drop', {}, 500); });
close.click(function () { if (info.get(0).style.display !== 'none') info.hide('drop', {}, 500); });
info.hide('drop', {}, 500);
});
//--></script>

私ならこのように書いてしまいますが、これを再発明とするのはおおげさなような…気がします。
私は依存性の高い既存のコードが多量にあって作り直すのが難しいと受け取ったのですが、そうでなければ、それほどの手間にはならないと思います。

> WAIとHTMLは別物です。文法とブラウザの実装も別物ですし、
なるほど。いわれてみれば、確かにそうですね。

> // HTMLで定義された属性では、設定方法と取得方法が違っても取得できる
これは HTML で定義されているからではなく、DOM で定義されているからではないでしょうか。
a要素ノードは DOM L2 HTML によって Interface HTMLAnchorElement として定義されています。

rev - Interface HTMLAnchorElement
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLAnchorElement.html#HTMLAnchorElement-rev

このように、属性ノードに反映されるIDL属性 (JavaScriptではプロパティ) を HTML5 では "reflecting IDL attribute" と定義しています。
http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#common-dom-interfaces

また、プロパティによる参照 と getAttribute() を同一視しているように感じますが、この2つは別物です。
例えば、HTMLAnchorElement.href は「絶対URI」を返しますが、getAttribute() は属性値をそのまま返します。

href - Interface HTMLAnchorElement
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLAnchorElement.html#HTMLAnchorElement-href
getAttribute - DOM L2 Core
http://www.y-adagio.com/public/standards/tr_dom2_core/core.html#ID-666EE0F9

<p><a href="#test">test</a></p>
<script><!--
var a = document.getElementsByTagName('a').item(0);
alert(a.href); // http://example.com/index.html#test
alert(a.getAttribute('href')); // #test
//--></script>

つまり、元々「プロパティによる参照」と「getAttribute() による参照」には互換性がないのです。

ブラウザは要素に未定義の属性を検知したらそれを無視するので、setAttribute() でブラウザが検知できない属性を定義することに問題はないと思います。

回答No.6

think49

#2, 3, 4, 5 です。

> （何かのブラウザのマイナーバージョンで、element.myprop='1'なら可、element.setAttribute('myprop', '1');でセットできなかったことがあった気がしますが、、、)
IE7- に存在した不具合の話でしょうか。

---
// IE7- の場合
element.className = 'foo'; // OK
element.setAttribute('class', 'foo'); // NG
element.setAttribute('className', 'foo'); // OK
---

IE の getAttribute / setAttribute: Days on the Moon
http://nanto.asablo.jp/blog/2005/10/29/123294
IE8での変化点一覧 + 備忘録 - latest log
http://d.hatena.ne.jp/uupaa/20081027/1225107483

IE7- では setAttribute() の第一引数で指定する値がプロパティと同じ意味を持ちましたが、IE8 で修正されました。
通常はプロパティに ハイフン(-) は含まれないので、IE7- であっても setAttribute() でdata- 属性をセットすることに問題はないと思います。
WAI-ARIA はDOMプロパティが定義されていませんし、既存のDOMプロパティとHTMLコンテンツ属性の名前が衝突しなければ不具合は発生しません。

回答No.5

think49

#2, 3, 4 です。

> toggleメソッドの再開発になりそうだからです。
既存のコードを出来るだけ流用したい都合があるのですね。

> そういったプラグインなどがあれば、と思いましたが、やはりなさそうでしょうか。
私は jQuery にそれほど詳しくないのでわかりませんが、他の方からアドバイスがあるかもしれません…。
# 基本的に、私は自分で作っちゃう方です。ライブラリも解析の対象としては興味深いのですが。

> クロージャを使うと他の要素のonclickから参照できないため、今回はNGだと思います。
既存のコードがクロージャを使える構成になっていないのなら、やむなしですね。

あと、2点気になったので。

> DOMやHTMLとしては、独自の属性名を追加するのは不正処理となるはずです。
WAI-ARIA も HTML5 も W3C が標準化した仕様であり、独自属性ではないと思うのですが…。

例えば、HTML5 で定義されている data- 属性は element.dataset で参照できることになっていますが、現在この仕様に対応しているブラウザはありません。
ですので、getAttribute() を使うわけですが、確認した限りでは全てのブラウザで参照できました。
(※以下、Google Chrome 5, Opera v10.61, Firefox v3.6.6, IE8 で確認しました)

---
<p id="data" data-hello="hello" data-world="world">test</p>
<script type="text/javascript"><!--
(function () {
var data = document.getElementById('data');
console.log(data);
console.log(data.dataset); // undefined (Google Chrome 5, Opera v10.61, Firefox v3.6.6, IE8)
console.log(data.getAttribute('data-hello')); // hello
console.log(data.getAttribute('data-world')); // world
}).call(this);
//--></script>
---

WAI-ARIA は HTML4.01, HTML5 ともにサポートしています。

5.1.4 XHTMLおよびHTML 4.01におけるARIAのサポート
http://www.hitachi.co.jp/universaldesign/wai-aria/primer_20080204/index.html#ariahtml

IE8, Firefox3, Opera9, Safari が対応していますし(Google Chrome は見付けられませんでしたが、Webkitなのでサポートしていると思います)、対応していなかったとしても読み上げなどの機能が働かないだけで、JavaScriptから DOMString 型の属性として利用する分には問題はないと思います。
setAttribute(), getAttribute() で対応できるはずです。

WAI-ARIAの誕生と現状 | コラム | ミツエーリンクス
http://www.mitsue.co.jp/column/backnum/20090501.html

# 実際、私は WAI-ARIA, data-*属性 共に使ったことがありますが、問題なく動作しています。

WAI-ARIA tablist
http://vird2002.s8.xrea.com/javascript/WAI-ARIA_tablist.html
仕様書リンク
http://vird2002.s8.xrea.com/javascript/ReferenceURL.html

お礼

>> toggleメソッドの再開発になりそうだからです。
>既存のコードを出来るだけ流用したい都合があるのですね。
都合って言うか、はっきり言えば、それってただの車輪の再発明だと思いますので。

横道にそれますね。。。

私自身、文法を絶対視しているわけではありませんので、そこまでこだわるつもりはありませんが。

> WAI-ARIA は HTML4.01, HTML5 ともにサポートしています。
WAIとHTMLは別物です。
文法とブラウザの実装も別物ですし、
文法チェッカーでエラーが出たとしても、ブラウザで動作すれば文法にも適合という見方はちょっと違うと思います。

実際に、HTML4で<canvas>や<embed>を使ったりとか、DOCTYPEを拡張せずにspry（各タグにspryというnamespace/属性を付加します）を使ったりとか、してますが、
HTML4で<canvas>が使えたからと行って、「HTML4が」<canvas>をサポートしているという言い方はせずに、「ブラウザが」HTML4での動作をサポートしていると言うと思います。

また、XMLHttpRequestやweb sockets、microformatsなども同様ですし、
WAIもまた同じではないでしょうか。

>> DOMやHTMLとしては、独自の属性名を追加するのは不正処理となるはずです。
紛らわしい表現をして済みません。
この「不正」というのは「HTML/XHTMLの文法違反」という意味で、ブラウザの動作上は期待通りに動く可能性はあります。

document objectとDOMの違いの検証コードの例を。。。

設定と取得を違う方法にするという人はあまりいないと思いますが、
厳密には別物ですので、HTML/XHTMLの文法違反を起こしている属性は互換性がないというのが一般的な見方のようです。
（この互換性を持たせたのが、参考サイトのIEにおけるgetAttribute/setAttributeの問題）

<p><a id="test" myprop="a" rel="BOOKMARK">aaaa</a></p>

<script>
a=document.getElementById('test');

alert(a.myprop);
alert(a.getAttribute('myprop'));

// 独自の属性は設定方法と取得方法が同じでないと取得できない（ブラウザ依存）
a.hello='hello';
alert(a.hello);
alert(a.getAttribute('hello'));

a.setAttribute('world', 'world');
alert(a.world);
alert(a.getAttribute('world'));

// HTMLで定義された属性では、設定方法と取得方法が違っても取得できる
a.rev='INDEX';
alert(a.rev);
alert(a.getAttribute('rev'));

alert(a.parentNode.innerHTML); //hello属性が入っていない
</script>

回答No.4

think49

#2, 3 です。

jquery-1.4.2.js のコードを読むとわかりますが、#1 で紹介された toggle( showOrHide ) は、#2 で紹介したように複数のイベントハンドラで共通のステータスを持つという意味では上手いことやっています。
toggle( showOrHide ) は element.style.display の値が判定要素に入っているので、個人的には実装する候補に入ります。

回答No.3

think49

#2 です。

> この作り方ならelement.style.displayをフラグと見立てて、直接show()かhide()を呼び出す方がわかりやすいんじゃないかと思います。
そうですね。
私が何も考えずに作るとしたら、element.style.display を元に show(), hide() を呼び出します。
toggle(handler, handler) が前提にあったので、toggle(handler, handler) を基本に据えましたが、ここで toggle(handler, handler) をベースにするのはおかしい気がしています。

toggle(handler, handler) は「クリック回数を基準にして動作を変更する仕組み」です。

・handler が2つあるならば、クリック回数の「奇数」「偶数」を判定する。
・handler が3つあるならば、クリック回数を「3で割った余り」から判定する。

しかし、実際にはクリック回数を基準としていませんよね。

・#button をクリックしたときにユーザが期待する動作は、#info が見えていれば不可視状態にし、見えなければ可視状態にすること。
・#close をクリックしたときにユーザが期待する動作は、#info が見えていれば不可視状態にし、見えなければ何もしないこと。

ですので、フラグとすべきは #info のdisplayプロパティの値だと思います。

> ライブラリの実装依存ですが、一応動作確認したコードです。
初回に click すると、hideInfo() -> showInfo() に見えること以外は特に問題はないと思います。
(#button はデフォルトで不可視状態が前提なのでしょうか)

> メリットは、（今回は使っていませんが）toggle()の引数を３つ以上にしたとき、どの順番に飛ばすかを指定できると言うことでしょうか。。。
#info の「クリック回数が3種ある」ということは「ステータスが3種ある」と同義ですよね。
私なら、$('#info').className や $('#info').attr('data-status') や WAI-ARIA 定義の属性にステータスを埋め込む方法をとります。

独自データ属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP
http://www.html5.jp/tag/attributes/data.html
アクセシブル・リッチ・インターネット・アプリケーション（WAI-ARIA）1.0
http://www.hitachi.co.jp/universaldesign/wai-aria/wd_20090224/

まあ、toggle(handler, handler, handler) は以下のようにも解釈できるので、

---
var clickCount = 1; // クリック回数
switch (clickCount % 3) {
　case 1: // 選択状態
　　alert('select');
　　break;
　case 2: // 開いた状態
　　alert('open');
　　break;
　case 3: // 閉じた状態
　　alert('close');
　　break;
　default:
　　throw new Error('unknown status');
}
---

これもステータスを判定している、といえなくもないですが、toggle(handler, handler, handler) 以外の場所からステータスを変更する方法が今一スマートじゃないんですよね。
# triggerHandler() しかり、jQuery.data() しかり。

やはり、複数のイベントハンドラから共通してアクセスできる場所にステータスを埋め込むべきだと思います。

---
(function ($) {
　var flag;　// クロージャで参照を保持する
　$(document).click(function (event) {
　　var target = event.target;
　　if (target.id === 'button');
　　if (target.id === 'close');
　});
}).call(this, jQuery);
---

このようにクロージャで参照させてもいいですし、DOMノードに埋め込んでもいい。
でも、不必要にクロージャを生産する必要はないので、個人的にはDOMノードに埋め込む方法がお勧めです。

お礼

> まあ、toggle(handler, handler, handler) は以下のようにも解釈できるので、
clickの処理を自分で書けば作れるのはわかっていますが、
自分で分岐処理を書くのがなぜやりたくないか、と言うと、toggleメソッドの再開発になりそうだからです。
もっとも、他に方法がなければ作りますが、、、

そういったプラグインなどがあれば、と思いましたが、やはりなさそうでしょうか。

もしくは、jQuery.dataで自動生成されるguidを取得する方法（特にtoggle()の引数に無名関数を渡した場合）があればいいのですが、、、

ほとんどのブラウザがJavaScriptのObjectが大本にありますので、属性（プロパティ）を自由に作ることは出来ますが、
DOMやHTMLとしては、独自の属性名を追加するのは不正処理となるはずです。
（何かのブラウザのマイナーバージョンで、element.myprop='1'なら可、element.setAttribute('myprop', '1');でセットできなかったことがあった気がしますが、、、)

で、そういう制限を取り払うための物がHTML5のdata属性だと思います。
クロージャを使わずにプロパティとして持たせる方がOOP"らしい"作り方だと思いますし、簡単ですしね。

古いバージョンのjQueryでは、DOM要素に対してlastToggle属性を追加して、その値で分岐させていたようです。
jQuery.data()はその代わりとして、グローバル変数にすると競合の問題が出てきますのでそれにも対応させるように作ってあるようです。

クロージャを使うと他の要素のonclickから参照できないため、今回はNGだと思います。

回答No.2

think49

#1さんの手法が一番スマートだと思いますが、質問をそのまま受け取るならば以下のように。
(※全角空白は半角空白に置換してください)

---
<a id="button">ボタン</a>
<div id="info">
<a id="close">閉じる</a>
<p>あいうえお</p>
</div>
<script><!--
(function ($) {
　var button = $('#button'), info = $('#info'), close = $('#close');

　function show () { info.show('slide'); }
　function hide () { info.hide('slide'); }

　hide();
　button.toggle(show, hide);

　close.click(function(){
　　hide();
　　button.unbind('click');
//　　button.toggle(show, hide);　// 同じ関数オブジェクトを渡すと、なぜか前回の参照が生きているかのような動作を示す
　　button.toggle(function () { info.show('slide'); }, function () { info.hide('slide'); });
　});
}).call(this, jQuery);
//--></script>
---

.toggle() ? jQuery API
http://api.jquery.com/toggle/
.unbind() ? jQuery API
http://api.jquery.com/unbind/

toggle() を再度初期化するなら、イベントを削除して element.toggle() を定義し直す必要があります。

# 個人的には、元からある toggle() を利用して実装する方がスマートだと思います。
# element.style.display === 'none' ならば、triggerHandler(type, [data]) で element.toggle() を誘発させるとか。

.triggerHandler() ? jQuery API
http://api.jquery.com/triggerHandler/

お礼

> # 個人的には、元からある toggle() を利用して実装する方がスマートだと思います。
> # element.style.display === 'none' ならば、triggerHandler(type, [data]) で element.toggle() を誘発させるとか。
たしかに出来そうなんですが、
この作り方ならelement.style.displayをフラグと見立てて、直接show()かhide()を呼び出す方がわかりやすいんじゃないかと思います。

ハンドラの再登録の方法は参考にさせていただきます。
ありがとうございました。

ライブラリの実装依存ですが、一応動作確認したコードです。
（BBS投稿フォームでBBS用に直接編集しているため、編集ミスがあれば済みません。）
メリットは、（今回は使っていませんが）toggle()の引数を３つ以上にしたとき、どの順番に飛ばすかを指定できると言うことでしょうか。。。

<script>
function showInfo(){
$('#info').show('slide', {}, 500);
}
function hideInfo(){
$('#info').hide('drop', {}, 500);
}
$('#button').toggle(showInfo, hideInfo);

$('#close').click(
function(){
$('#info').hide('blind', {}, 300);
jQuery.data( $('#button').get(0), 'lastToggle' + showInfo.guid, 0 );
}
);
</script>