メニューの切り替えの切り替え

Question

トグルメニューがあります。コードと機能についてはhttp://jsfiddle.net/Wp2em/41/をご覧ください。

同じコードを使用している実際のサイトでは、h3（カテゴリ1、2つ目は& 3）をクリックするたびに、そのサブメニューが少し下に切り替わり、ページが変更されます新しいh3リンクページに移動し、サブメニューが新しいページで一緒に折りたたまれます。

親ページ/新しいh3リンクページが開いているときに、サブメニューが開いていると言うことができる方法はありますか？これはサイドバーの効果があるbank siteを参照してください。トグルメニューを希望します。

ありがとうございます！

Answer 1

はここにある私のfiddle

あなたが行う必要がありますすべてはあなたが現在オンになっているとメニューがページのロード後に開くべきである李上のクラス「currentPageに」を入れています。私はまたあなたのCSSのいくつかを動かしましたので、今や少しスムーズに動くはずです。

**フィドルコードが更新されました。現在のURLを見て、それに一致するリンクをcurrentPageに設定します。また、別のメニューが開いている場合は、別の親メニューをクリックすると閉じます。

* *フィドルコードが更新されました。さて、あなたが矢印をクリックすると、メニューは拡大し、リンクには行きません（銀行サイトのように）。また、すべての親H3にアンカータグを配置する必要がある場所を変更しました。

Answer 2

ページが読み込まれ、サブメニュー（ul.second_level）が生成された場合（つまりPHPから）、表示する必要があるサブメニューのactiveのcssクラスを解析します。

ul.active { 
    display: block 
} 

ul.second_level { 
    display: none 
} 

これは、あなたのクリック機能に加えてあります。アニメーションを開始するのでクリックイベントをトリガーしないでください（あなたが望んでいないと思われる）。

更新：

それはかなり基本的なものですが、私はあなたのメニューのHTMLコードを作成する方法を知りません。 PHPとデータベース（例えば）を使ってメニューを作成している場合は、あなたがいるページですべてのサブメニュー項目をチェックしてください。ページがサブメニューのページの1つである場合、そのサブメニューでクラス「アクティブ」を設定します。 CSSは残りの部分を行います（このサブメニューを表示し、他のサブメニューを非表示にします）。

静的なページをお持ちの場合は、javacriptを使用して、ページの種類を確認してください（例：window.location.href）。残りは同じです。

Answer 3

これはあまり簡単ではありません。私は非常に似た問題を抱えていましたが、ページを同じURLにポストしていましたので、H3のIDのリストを隠しフィールドに格納していました。

あなたは新しいページにまっすぐナビゲートしているので、これを行うにはクッキーを使用する必要があります。アイデアは、あなたがH3を開いてそれを閉じるたびに削除するたびに、クッキーを作成してその上に値を設定することです。これを行うにはthis pluginを使用できます。次に、別のページを開くと、スクリプトはH3を読み取り、Cookieから開いて開きます。

もう1つの方法は、開いた/閉じたH3情報をサーバーに戻してセッションデータに保存し、それを使用して新しいページのHTMLを構築し、正しいH3がオープンされているようにすることです。