jQuery UIアコーディオンメニューで現在のコンテンツパートを有効にする

Question

現在表示中のページに応じて、jQuery UI Accordionメニューの正しいコンテンツ部分を動的にアクティブにする方法を理解しようとしています。私は広範囲に調査しましたが、これまで他の人たちがこれに問題を抱えていたようですが、私にとってはうまくいく解決策はまだ見つかりませんでした。私はactiveがメニューの特定のインデックスを開くように設定できることを知っていますが、私はこれを動的に行う必要があります。

私はactivateメソッドを使って欲しいものを達成できると思っています。私はそれを理解できないようです。私は、通常はバック/フォワードボタンや特定のURLを介した直接のナビゲーションでは機能しないので、クッキーを設定しないようにしたいと思います。誰にでもアイデアはありますか？前もって感謝します！ここで

は私のメニューの簡易な構造である：

<div id="menu"> 
    <div id="sections"> 
     <div class="grouping accordion"> 
      <a id="heading1" href="#">Heading #1</a> 
      <div class="sub-items"> 
       <a href="/item1">Item #1</a> 
       <br /> 
       <a href="/item2">Item #2</a> 
      </div> 
     </div> 
     <div class="grouping accordion"> 
      <a id="heading2" href="#">Heading #2</a> 
      <div class="sub-items"> 
       <a href="/item4">Item #4</a> 
       <br /> 
       <a href="/item5">Item #6</a> 
      </div> 
     </div> 
    </div> 
</div> 

そしてここでは、私のjQueryのアコーディオンのinitです：

$('#sections').accordion({ 
    header: '> .accordion > a', 
    autoHeight: false, 
    collapsible: true, 
    active: false, 
    animated: 'slide' 
}); 

ですから、たとえば/item4ページに現在ある場合、グループの下で見出し＃2を展開する必要があります。

EDIT： 私はかなり良い解決策になると思われるもの発見し、以下の答えとして、うまくいけば、これは同様の問題を持つ人を助けることを掲載！

Answer 1

メニューのアクティブな見出しのためにいくつかのCSSで作業していましたが、私は非常にきれいで簡単な解決策を見つけました。私は物事を考え過ぎたかもしれないように見える！問題になっているのと同じHTMLを使用して

、ここに私のために働いているJavaScriptのだ。

//accordion menu 
$('#sections').accordion({ 
    header: '> .accordion > a', 
    autoHeight: false, 
    collapsible: true, 
    active: '.selected', 
    animated: 'slide' 
}); 

//add currentPage class to current menu item based on url 
var url = window.location.href; 
url = url.substr(url.lastIndexOf("/") + 1); 
$("#sections").find("a[href='" + url + "']").addClass("currentPage"); 

//get id of header anchor tag 
var headerId = $(".currentPage").parents(".accordion").children("a").attr("id"); 

//check if headerId is set, if so activate that id 
if (headerId) { 
    $('#sections').accordion('option', 'animated', false); 
    $('#sections').accordion('activate', $('#' + headerId)); 
    $('#sections').accordion('option', 'animated', 'slide'); 
} 

このソリューションは非常に簡単です、それはURLから現在のページを取得し、各リンクに対してそれを比較しますアコーディオンメニュー。一致するものが見つかると、そのリンクにcurrentPageのクラスを与えます（これにより、CSSを使ってそのリンクをスタイルすることができます）。次に、.accordionのクラスを持つリンクの親を探し、最初の子リンク（アコーディオンヘッダー）を見つけて、ヘッダーのIDを取得します。ヘッダーIDが見つかったと仮定すると、activateメソッドを使用して正しいセクションを展開できます。

Answer 2

特定のタブを有効にするには、accordion('activate', index)メソッドを使用すると便利です。例：

ただし、ページごとにインデックスキーを定義するものが必要です。おそらくこれを動的に生成することすらできます。私はおそらく、ページオブジェクトを作成します：とにかく、あなたの見出しをループすることができます、いくつかのハックjQueryの魔法で

var active_heading_index = null; 

$.each(Pages, function(heading) { 
    $.each(heading.items, function(item) { 
     if($(location).attr('href') == item.href) { 
      heading.is_active = true; 
      // or 
      active_heading_index = heading.id 
     } 
    }); 
}); 

if(active_heading_index) $("#sections").accordion('activate', active_heading_index); 

を

Pages = { 
    "heading1" : { 
     "id": 1, 
     "is_active": false, 
     "items": { 
      "item1": { 
       "href": "item1", 
       "name": "Item #1" 
      }, 
      "item2": { 
       "href": "item2", 
       "name": "Item #2" 
      } 
     } 
    }, 

    "heading2" : { 
     /* etc*/  
    }, 

} 

を、私はそれを行うための、よりクリーンで効率的な方法があると確信しています。

Answer 3

すべてのページクリック（標準的な非Ajaxy方法）でサーバーに戻る場合、サーバーは適切なノードに「選択済み」クラスを追加できます。だから、あなたはクライアントでこのようなものを返すだろう（私は、ほとんどのラベルをスキップして、必須のコードを書いている）。

<ul id="menu"> 
    <li> 
    <ul> 
     <li> 
     </li> 
     <li class="selected"> 
     <a href="">Menu 102</a> 
     </li> 
    <ul> 
    </li> 
    <li> 
    ... 
    </li> 
<ul> 

次に、アコーディオンのactivateプロパティに与える適切なインデックスを見つけます。

$(document).ready(function() { 
    var index = $("li.selected").parents("li").last().index(); 
    $("#menu").accordion({ 
     active: index, 
     collapsible: true 
    }); 
}); 

parents("li").last() jQueryは一番上の要素を返します。これは、あなたのメニューに当てはまるはずの "selected"というクラスを持つサブ要素が1つしかない場合にのみ機能します。

Answer 4

私はこのコードを使用して、それをやった：

var newsNum = parseInt(window.location.hash.slice(1)); 
$(document).ready(function(){ 
    $("#menu").accordion('activate', newsNum); 
}); 

をURLはexample.com/index.html#1