2

非常にシンプルで、プラグインなしでjqueryだけでうまく機能するメニューコードをいくつか見つけました。私がやりたいのは、新しいページがリンクされたときに、そのページがリンクされたアイテムまでメニューを展開し (必要に応じて)、現在の window.location がタグと一致する場合にそのアイテムをアクティブとして強調表示するように、それを固定することです。 href。私は Dom コンソールを探し回っていますが、運が良ければ、もっと簡単な jquery ソリューションが必要だと思います。これを達成する方法についての提案は大歓迎です。ありがとう

    $(document).ready(function() {
        $('#menu ul').hide();

  /* Note the following three lines added as working solution to original question. */
  /* works for fully qualified url: i.e. http://www.mydomain.com/mypage.ext         */
  /* also note that addClass('current') requires .current class in your css          */

        var currentLink = $("a[href='" + location.href + "']");
        currentLink.parents("ul:hidden").slideDown("normal");
        currentLink.filter('a:first').addClass('current');

  /* end of solution fix                                                             */

        $('#menu li a').click(
         function() {
           var openMe = $(this).next();
           var mySiblings = $(this).parent().siblings().find('ul');
           if (openMe.is(':visible')) {
               openMe.slideUp('normal');  
           } else {
              mySiblings.slideUp('normal');  
              openMe.slideDown('normal');
           }
       });
    });

メニューは次のとおりです。

<ul id="menu">
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li> 
 <li><a href="#">3</a>
     <ul class="submenu">
        <li><a href="#">3-1</a>
            <ul>
                <li><a href="#">3-1-1</a></li>
                <li><a href="#">3-1-2</a></li>
                <li><a href="#">3-1-3</a></li>
            </ul>
        </li>
        <li><a href="#">3-2</a>
            <ul>
                <li><a href="#">3-2-1</a></li>
                <li><a href="#">3-2-2</a></li>
            </ul>
        </li>
    </ul>
 </li>
 <li><a href="#">4</a></li>
 <li><a href="#" title="">5</a>
 <ul>
     <li><a href="#">5-1</a></li>
     <li><a href="#">5-2</a></li>
     <li><a href="#">5-3</a></li>
 </ul>
 </li>
 <li><a href="#" title="">6</a>
 <ul>
     <li><a href="#">6-1</a></li>
     <li><a href="#">6-2</a></li>
     <li><a href="#">6-3</a></li>
 </ul>
 </li>
 <li><a href="#" title="">7</a></li>
 <li><a href="#" title="">8</a>
 <ul>
     <li><a href="#">8-1</a></li>
     <li><a href="#">8-2</a></li>
     <li><a href="#">8-3</a></li>
 </ul>
 </li>
 <li><a href="#" title="">9</a></li>
</ul>
4

2 に答える 2

1

一致する URL を持つリンクを見つける防弾方法は次のとおりです。

var currentLink = $("a").filter(function() {
    return this.href == location.href;
});

href に常にアプリの相対 URL を使用する場合 (例: href="/abc/123.htm")、属性セレクターを使用できます。

var appRelativeUrl = location.pathname + location.search + location.hash;
var currentLink = $("a[href='" + appRelativeUrl + "']");

href に常に絶対 URL を使用する場合 (例: href="http://mysite.com/abc/123.htm")、属性セレクターを使用することもできます。

var currentLink = $("a[href='" + location.href + "']");

ただし、HTML で相対 URL を使用する場合は、.filter().

次に、メニューを展開するには、非表示の親<ul>要素をすべて見つけて下にスライドします。親が表示された後、リンクのサブメニューを展開する場合は、リンクをクリックします。

currentLink.parents("ul:hidden").slideDown("normal", function() {
    currentLink.click();
});

デモはこちら
デモコード

于 2013-01-30T22:50:47.003 に答える
0

これは通常、ページが提供されるときに現在のメニュー項目に適切なクラス名を追加して表示されるようにすることで、サーバー側で処理されます。

于 2013-01-30T22:35:05.300 に答える