如何使 Jquery 菜单具有粘性

Question

我发现了一些非常简单的菜单代码，并且在没有插件的情况下仅使用 jquery 就可以很好地工作。 我想做的是使其具有粘性，以便在链接到新页面时，该页面将菜单（如有必要）扩展到链接的项目，并在当前 window.location 与标签匹配时将该项目突出显示为活动的链接。 我一直在寻找 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>

Answer 1

这是查找具有匹配 url 的链接的防弹方法：

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

如果您总是使用应用相对 URL 作为您的 href（例如 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();
});

Demo here
Demo code

Answer 2

这通常在服务器端处理，方法是在提供页面时将适当的类名添加到当前菜单项，以便它们可见。