jQueryアコーディオンメニュー - アコーディオンメニューを私が開いているページに開いたままにする

Question

私はあなたが助けてくれることを願っています。 jQueryの新機能で、サイドナビゲーションのための5レベルまたは6レベルのアコーディオンメニューに取り組んでいます。私はこれまでにDane Peterson @ daneomatic.comから大部分のコードを入手しました（Daneに感謝！）。しかし、私は一つのことにこだわっている：

私はこのように私のアコーディオン/木の仕事をしたいのです：、私はにダウン移動すると、言う

レベル3、および開くためのリンクをクリックしてくださいそのレベルにリンクされているページ、レベル3のページが読み込まれたら、そのページに表示されていることをどのように示しますか？ また、ページを読み込んだときにツリーをそのレベルまで開いたままにするにはどうすればよいですか？

私は、アコーデオン/ツリーが自動的に更新して、あなたが現在いるページを表示し、そのレベルにツリーを開いている方法があると思いますか？

ありがとうございます！

Answer 1

これはJavaScriptでナビゲートされたウェブサイトの落とし穴の1つです。あなたのURLは伝統的なページのように実際にあなたのページを指していません。ブックマークや戻るボタンのような通常のブラウザ機能を使用するのが難しくなります。

最近、これらの情報を使用しているように見える解決策の1つは、この情報をURLのハッシュ部分の後に格納することです。上記「jsPageIndicator」の代わりに情報を格納することにより

http://www.mysite.com/path/index.html#jsPageIndicator 

、あなたはその後、$（ドキュメント）.ready（）の後にJavaScriptでそれを解析し、それをロードする必要がありますどのページあなたを伝えることができます。あなたの場合、これはフォーカスがあるアコーディオンのインデックス（開いておく必要がある）のような単純なものかもしれません。あなたはまた、アレックスは、以下の指摘するように、自動的にURLに基​​づいて正しいセクションを開くには、アコーディオンを取得するには、benalman.com/projects/jquery-bbq-plugin

Answer 2

をjQuery history plugin.

見たりしたい場合があります

、あなたは始めましょう以下のようなものでnavigationオプションを有効にする：デフォルトでは

$('#accordion').accordion('option', 'navigation', true); 

、このオプションは、URLのfragmeに一致するhrefを持っているアコーディオンヘッダーのリンクを探しますnt（URLがhttp://somesite.com/about#contactの場合は#contactがフラグメント）、そのヘッダーリンクのセクションが開きます。あなたが別のページに移動するにはアコーディオンを使用して、あなたはおそらく照合するURLフラグメントを持っていないので、カスタムnavigationFilterを記述する必要がありますしているので：

$('#accordion').accordion('option', 'navigationFilter', function(){ ... }); 

あなたはにnavigationFilterオプションを使用することができます現在のページのURLへのヘッダーリンクと、accordionプラグインがどのように一致するかを上書きします。

これまでのところ、現在のページに基づいて開くアコーディオンの正しいセクションがあります。次に、ページに対応するそのセクションのリンクを強調表示する必要があります。あなたのような何かをそれをやる：ここでは

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#accordion li').each(function() { 
     var li = $(this); 
     var a = $('a', li); 
     if(/* compare the href of the 'a' element to the current URL */) { 
     li.addClass('active'); 
     } 
    }); 
    }); 
</script> 

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
    <ul> 
     <li><a href="/about">About</a></li> 
     <li><a href="/contact">Contact</a></li> 
    </ul> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
    <ul> 
     <li><a href="/help">Help</a></li> 
     <li><a href="/faq">FAQ</a></li> 
    </ul> 
    </div> 
</div> 

我々は現在のURLと一致するものを選ぶ、ナビゲーションアコーディオン内のすべてのページのリンクを経由、および、それに.activeクラスを適用していたあなたにCSSでスタイルを変えることができます。余談

---

アン：別のは、おそらくより良い、第二部を達成する方法は、既に適切なリンクに適用.activeクラスにページを構築することですが、それはあなたがバックエンドを超えると、そのコントロールを持っていると仮定しあなたはそれを行う方法を知っています。実際にはその場合、navigationFilterのもの全体をスキップして<script>ブロックを生成して、アコーディオンのactiveオプションを設定して右側のセクションを開くことができます。

Answer 3

あなたはここで見ることができます：上記のhttp://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

Answer 4

どれも私のために働いていません。 jquery uiのドキュメントは余裕があり、ソースコードはjqueryに精通していない人にとって多くの手がかりを残しませんでした。

サイドバーにアコーディオンを使用し、各コンテンツセクションのリンクが表の内側にあるため、アコーディオンの作成後にHTML構造（壊れやすいもの）を追跡しなければなりませんでした。

 $("#sidebar td").each(function() { 
      var td = $(this); 
      var a = td[0].firstChild; 
      if (a.href == location.href) { 
       $("#sidebar").accordion("activate", 
         td.parent().parent().parent().parent().prev()); 
      } 
     }); 

はい、恐ろしい、TR、TBODY、テーブル、およびDIVをバックアップし、それが働いていた、と私たちのケースでは、我々は数ヶ月でHTML構造を変更していません。ここで

Answer 5

は私のために働いた例です。

Need help with jQuery UI Accordion navigationFilter option

Answer 6

OKこの問題はしばらくの間、私を盗聴し、私はこの問題に対する私の解決策を投稿するだろうと思ってきました。 （私はJQueryのちょっとした初心者です。）

私の状況では、メニューの自動化を処理するためのJQueryスクリプトを含むマスターページがあり、いくつかのメニューを持ついくつかのコンテンツページがあります（私はページヘッダの横に横のメニューを持っていて、JQueryのアコーディオンはサブメニューを処理して話す）。

メニューヘッダdivにidタグを追加して、コンテンツページのコンテンツプレースホルダに次のコードを配置しました。

$(document).ready(function() { 
     $('.active').next().hide().removeClass('active'); 
     $('#yourMenuHeaderIdTag).addClass('active').next().show(); 
    }; 

これは完全に機能しています。これは、私が先週、これほど苦労したのはなぜですか？