jQuery根据页面切换活动菜单项

我有下面的代码，这是工作的罚款：

$('#menu .container ul li:not(:first-child)').fadeOut() 

$('#menu .container ul li:first-child').click(function() { 
    $(this).siblings().fadeToggle(); 
})

我只是隐藏所有的菜单项，清理导航位。我现在想要做的是让浏览器检测你正在查看的部分（即如果你在最新作品下查看Magda）并自动显示该部分。我不太清楚如何去做这件事。也许检测到的URL，然后找到它的所有兄弟姐妹加载时的网址为#menu .container和.show()？任何人都可以帮助这个吗？

来源

2011-02-10 steve

$("#menu a").each(function() { 
    if($(this).attr('href') == window.location.href) { 
    //Show the menu. 
    } 
});

你必须填写实际显示菜单中的位，但。让我知道你是否也需要帮助。

我在Chrome Javascript控制台中简单测试了一下，它似乎找到了正确的元素。不过，请务必跨多个浏览器对其进行测试。我认为这也依赖于每个链接中的href元素是“完整”网址，包括http://和域名。如果它们是相对链接（例如/home），则需要使用window.location.pathname而不是window.location.href。

来源

2011-02-10 16:57:33

这个很好用。我添加了`$（this）.parent（）。parent（）。children（）。show（）;`使菜单功能正常工作，并且它是活的！非常感谢。我认为所有其他的建议也可以起作用，但这是最容易做到的，而不需要重新编码所有内容。谢谢。 – steve 2011-02-10 17:11:46

您可以使用PHP为元素添加某个类，然后使用jQuery查找元素并显示它。

例如：

<ul> 
<li class="<?=($page_1 == $selected_page ? "active" : "");?>">Page 1</li> 
<li class="<?=($page_2 == $selected_page ? "active" : "");?>">Page 2</li> 
<li class="<?=($page_3 == $selected_page ? "active" : "");?>">Page 3</li> 
</ul>

用jQuery

然后：

$('#menu .container ul li.active:first-child').click(function() { 
    $(this).siblings().fadeToggle(); 
})

如果菜单被自动打印用PHP，它可以被容易地实现。

其他办法 - 不隐藏在第一时间选择的菜单，所以它会立即展开:)

来源

2011-02-10 16:54:27

我看到你在每一页上的第n节都有一个body类。如果你可以申请一个类来每个父菜单项的UL，你就可以显示或隐藏使用子菜单

.menuparent ul { display: none; } 
.bodyclass .menuparent ul { display: block; }

- 编辑 -

刚刚看到，它不是编码通过这种方式：

<ul> 
    <li class="menuparent">menu parent 
    <ul> 
     <li>menu sub 1</li> 
     <li>menu sub 2</li> 
    </ul> 
    </li> 
</ul>

这将是我的工作答案需要。如果可以的话，可能是更好的代码编写方式，因为它是父子菜单系统。

来源

2011-02-10 16:58:04

jQuery根据页面切换活动菜单项

回答

相关问题