如何使Jquery菜单粘滞
如何使Jquery菜单粘滞
提问于 2013-01-31 06:29:33
我发现了一些菜单代码，它们非常简单，只需要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>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-01-31 06:50:47
以下是查找具有匹配urls的链接的万无一失方法：
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 + "']");如果您始终对hrefs使用绝对URL(例如href="http://mysite.com/abc/123.htm")，则还可以使用属性选择器：
var currentLink = $("a[href='" + location.href + "']");但是，如果您在HTML中使用相对urls，请使用使用.filter()的第一种技术。
然后，要展开菜单，请找到所有隐藏的父<ul>元素并向下滑动它们。在显示父级后，如果您想展开链接的子菜单，请单击该链接：
currentLink.parents("ul:hidden").slideDown("normal", function() {
currentLink.click();
});Demo here
Demo code
Stack Overflow用户
发布于 2013-01-31 06:35:05
这通常是在服务器端处理的，方法是在提供页面时将适当的类名添加到当前菜单项中，以便它们可见。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14615099
复制相关文章
相似问题
腾讯云开发者
