<！ - jQueryのイベントを削除、結合事象、そごう1 - >
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル>ドロップダウンメニュー</ TITLE>
<スタイル>
</スタイル>
の<style>
* {
パディング：0;
マージン：0;
のlist-style：なし;
}
.container {
幅：500pxなど;
高さ：230px;
マージン：0自動100pxに;
}
ボタン{
幅：50％;
高さ：30px;
行の高さ：30px;
}
{H1の
幅：500pxなど;
マージン：自動;
}
/ * ---上記表示されない、次のキー--- * /
/ *ここであり。transitionendを使用してボックスオブジェクト（操作アニメーションの終了後に行われます）、
transitionendの結合にjQueryのに使用し、■ははtransitionendが複数回行われることになる、いくつかの属性が変更されています。
一度だけバインドされた場合は、box.off使用$（ 'transitionend'）を覚えています。ワン（ 'transitionend'、関数（）{...}）* /
■は{
設定属性がある場合に/ *初期化JSの初期化の下* /参照する
高さ：200pxのと、
背景：＃1 f0e;
パディングトップ：20ピクセル;
パディング底：20ピクセル;
オーバーフロー：隠された;
}
.fadeSlideUpDown {
高さ重要:! 0;
不透明度：0重要;!
！幅：0重要;
パディングトップ：0重要;!
パディングボトム：0重要;!
/ *クラスを超える高さを設定し、標準モード+の上下幅=実際の幅の余白ので、上下の余白内で設定する必要があります、それは* /セットマージン内に奇妙なパターンを必要としない可能性がある場合
も同様/ *：標準モードのための垂直幅のマージンが= +実際の幅がある場合、クラス上の幅を設定し、左右の余白内に設定されなければなりませんそれは、* /設定した余白内奇妙なパターンに必要ないかもしれません
}
.transition {
-webkit転移：すべて.5s。
遷移-moz：全.5s。
-ms遷移：全.5s。
遷移-o：すべて.5s。
トランジション：すべての.5s。
}
</スタイル>
</ HEAD>
<BODY>
<DIV CLASS = "コンテナ">
<ボタンクラス= "ショー">显示</ button>の<ボタンクラス= "隠す">隐藏</ button>の
<divのクラス= "ボックス">
<P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P> S </ P> <P>
<タイプ= "テキスト/ JavaScriptを" SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"のスクリプト> </ SCRIPT>
<SCRIPT>
//取得するjQueryのオブジェクト
のvarショー= $ $（ 'ショー'）、
$皮= $（'非表示にします。 '）、
$ボックス= $（'ボックス。'）;
// EL $はオブジェクトを初期化する
のinit（$ ELE）として機能{
// $ボックスの高さには、設定された高さは、ブラウザが$ボックスの高さを知っていないこと、が存在しないことを、この気晴らしの内容によって決定され
、過剰な財産遷移の使用は、何のトランジション効果は存在しませんので、//
//ブラウザが解決されていないが過度の高さ0PXお互いを知って、それは隠し表示する瞬間です。
//そこでここでは、初期化時に幅と高さ$ボックスを取得し、ディスプレイの幅と高さを解決することができます設定する必要があります。
//過度上下する場合は、高さを設定し、幅が過度その周りに設定することができます。
ele.width $（$ ele.width（））;
$ ele.height（$ ele.height（））;
//アニメーション追加
$ ele.addClass（ 'トランジションを'）;
（ '：隠された' $ ele.is（））IF {
$ ele.data（ 'ステータス'、 '隠された'）;
$ ele.addClass（ 'fadeSlideUpDown'）;
}他{
$ ele.data（ 'ステータス'、 「）示され」;
}
}
// $ボックスオブジェクトは、次の4つのイベントにバインドされています。
box.on $（ 'ショー隠さ示すの非表示'、機能（E）{
はconsole.log（e.type）
}）
//表示ボタン結合イベント
の$ show.on（ 'クリック'、機能（）{
//ステータスが同じであれば、それは実行されません。
; IF（$ box.data（ 'ステータス'）=== 'ショー' || $ box.data（ 'ステータスが'）=== '示され'）リターン
トリガーイベントの前に//それは、ドロップダウンメニューを示して前負荷需要のロード：設定状態を、指定したイベントをトリガするには、適用される。
$のbox.data（「状態」、「ショー」）トリガー（「ショー」）;.
//ここでは非同期呼び出しの錯覚を使用し、オブジェクトは20ミリ秒後に表示され、ショーにユーザーをだますためのアニメーションを実行し、この効果が表示されます。
; $（）box.show
のsetTimeout（関数（）{
box.removeClass $（ 'fadeSlideUpDown'）;
}、20）は、
アニメーション//設定状態の終了後、及び指定されたイベントトリガー
の$ box.offを{（（ 'transitionend' ON 'transitionend'）、関数（）
//結合transitionendアニメーションの最後にイベント実行のために、ここで使用されるように、5回のトリガとなるようなイベント
//と$ボックス5つの属性が変化している、それが5回アニメーションで、各実行が完了するよう、イベントをトリガします。
$ボックス.dataの（ 'ステータス'、 '示され'）トリガー（ '示され'）;.
}）
}）
//隠しボタンにバインドされたイベント
の$ hide.on（ 'クリック'、機能（）{
//同じ状態であれば、 。実行されません
（$ box.data（ '状態'の場合は 、リターン）=== '隠す' || $ box.data（ 'ステータス'）=== '隠れ'）
の状態を設定し、//イベントトリガの前に、そして、指定されたイベントをトリガーする。
$ box.data（ 'ステータス'、 '非表示'）トリガー（ '隠す'）;.
$のbox.off（ 'transitionend'）。（ 'transitionend'で、関数（）{
box.addClass $（「fadeSlideUpDown」）;
$のbox.hide（）;
//イベント隠さトリガー5回、ここでは、アニメーションの終了後に実行されたイベント結合transitionendの使用に関するので
あり、//と$ボックス5つの属性を変更します、それを5回アニメーションで、それぞれの実行が完了している隠されたイベントをトリガします。
//ここであなたはそれが各実行の前にtransitionendイベントを削除される前に、一度数えマージするすべての映画、実行が再開されます
。（「transitionend」）1を縛られたあなたは$のbox.off（「transitionend」）を使用したいので、ここで//固定、
transitionendを除去する前に、それぞれの実行前に一度だけのバインディングをバインド//。
//基本的なアニメーションアニメーションは、前の実行前に除去しなければなりません。
。; $（ 'ステータス'、 '隠された'）トリガー（ '隠された'）box.data
}）
}）
//初期化
のinit（$ボックス）;
</ SCRIPT>
</ BODY>
</ HTML>