Question

我找到了一些非常简单的菜单代码，并且只是在没有插件的情况下从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>

Answer 1

以下是查找匹配网址链接的防弹方式：

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

如果你总是使用href的app相对URL（例如href="/abc/123.htm"），你可以使用属性选择器：

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

如果你总是使用hrefs的绝对URL（例如href="http://mysite.com/abc/123.htm"），你也可以使用属性选择器：

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

但是，如果您在HTML中使用相对网址，请使用.filter()的第一种技术。

然后，要展开菜单，请找到所有隐藏的父<ul>元素并将其向下滑动。显示父母后，如果要展开链接的子菜单，请点击链接：

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

Demo here
Demo code

Answer 2

这通常通过在服务页面时向当前菜单项添加适当的类名来处理服务器端，以便它们可见。

如何让Jquery菜单变粘

2 个答案: