0

jQuery UI アコーディオンを使用するナビゲーション メニューがあります。li a にアクティブなクラス スタイルを適用するスクリプトがあります。

            $(".secondaryMenu a").each(function() {   
                if (this.href == window.location.href) {
                        $(this).addClass("active");
                    }
                    });

このクラスが適用されたアコーディオン パネルはすべて、そのページでコンテンツ パネルがアクティブなままであると言いたいです。これにより、ユーザーがリンクをクリックして別のページに移動しても、ナビゲーションが表示された状態でパネルがアクティブなままになります。ページを別のディレクトリに配置する必要がなかったので、アクティブなクラスを使用できることを望んでいました.

マークアップ:

            <nav>
            <ul id="accordion3">
             <li><a href="somewhere.php">Link</a></li>
                <li><a href="somewhere.php">Link</a></li>
                <li><a href="somewhere.php">Link</a></li>
                <li class="accHeader"><a href="somewhere.php">Link</a></li>
             <ul>
                 <li><a href="somewhere.php">Link</a></li>
                  <li><a href="somewhere.php">Link</a></li>
                </ul>
                <li><a href="somewhere.php">Link</a></li>
                <li class="accHeader"><a href="somewhere.php">Link</a></li>
                <ul>
                 <li><a href="somewhere.php">Link</a></li>
                 <li><a href="somewhere.php">Link</a></li>
                 </ul>
                <li><a href="somewhere.php">Link</a></li>
             <li class="accHeader"><a href="somewhere.php">Link/a></li>
                 <ul>
                 <li><a href="somewhere.php">Link</a></li>
                 <li><a href="somewhere.php">Link</a></li>
                </ul>
                <li><a href="somewhere.php">Link</a></li>
            </ul>
            </nav>

jQuery:

        $(function() {
                  $( "#accordion3" ).accordion({
                    navigation: true,
                    collapsible: true,
                    heightStyle: "content",
                    header:'.accHeader',
                    icons:  {header: 'acc-plus', activeHeader: 'acc-minus', },
                    active: $("#accordion3 .accHeader ul li a").hasClass('active')
                                });
                                      $("#accordion3 li a").click(function() {
                    window.location = $(this).attr('href');
               return false;

              });

私の質問は、ヘッダーの下のリンクのいずれかにアクティブなクラスが適用されている場合に基づいて、コンテンツ パネルをアクティブにする方法を教えてください。

どうすればいいかは考えても、なかなか実現しない。true の場合、ヘッダーの下のリンクに適用されるアクティブなクラスを探し、コンテンツをアクティブに保ちます。false の場合、デフォルトはアクティブな false です。

4

1 に答える 1

0

jQuery の親セレクターを使用して、親を見つけてクラスを適用するだけです。

$(".secondaryMenu a").each(function() {   
    if (this.href == window.location.href) {
        $(this).addClass("active").parents(".accHeader").addClass("active");
    }
});

あなたの質問を正しく理解しているかどうかはわかりませんが、理解できればうまくいくはずです。

于 2013-04-03T21:07:35.457 に答える