1

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

この方法で自分のやりたいことができると思っているのですactivateが、なかなかわからないようです。通常、戻る/進むボタンや特定のURLを介した直接ナビゲーションでは機能しないため、Cookieの設定は避けたいと思います。誰かアイデアはありますか？前もって感謝します！

これが私のメニューの単純化された構造です：

<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アコーディオンの初期化です：

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

したがって、/item4たとえば現在このページを表示している場合は、見出し＃2の下のグループを展開する必要があります。

編集： 私はかなり良い解決策と思われるものを見つけ、以下の答えとしてそれを投稿しました、うまくいけば、これは同様の問題を抱えている人を助けるでしょう！

4

4 に答える 4

0

特定のタブをアクティブにするには、このaccordion('activate', index)メソッドを使用する必要があります。例：

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

ただし、ページごとにインデックスキーを定義するものが必要になります。おそらくこれを動的に生成することもできます。私はおそらくPagesオブジェクトを作成します：

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

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

}

いくつかのハックな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);

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

于 2012-04-16T21:31:33.493 に答える
0

メニューのアクティブな見出しの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メソッドを使用して正しいセクションを展開できます。

于 2012-04-16T21:47:59.107 に答える
0

ページがクリックされるたびにサーバーに戻る場合（標準の非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は最上位の要素を返します。これは、クラスが「選択済み」のサブ要素が1つしかない場合にのみ機能します。これは、メニューの場合に当てはまります。

于 2013-04-08T05:17:06.943 に答える
0

私はこのコードを使用してそれを行いました：

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

そして、URLはexample.com/index.html#1のようになります

于 2013-04-08T05:22:04.340 に答える