我使用PHP来回显我的导航选项列表，这是由于每个用户的权限不同。该列表被分为多个组，其中还有几个列表项，用户单击该组的标题即可展开，列出子菜单。我已经能够使用以下javascript为当前打开的菜单设置活动类：
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//slide up if visible (works fine).
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
//otherwise slideDown (works fine too).
}
});
}
$(document).ready(function() {markActiveLink();initMenu();});
function markActiveLink() {
$("#menu li ul li a").filter(function() {
return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase();
}).addClass("active")
.closest('ul') //some markup problem
.slideDown('normal');
}
这是我对正在显示的列表的标记：
echo "<ul id='menu'>";
echo "<li><a href='#'>Adminstration</a>
<ul><li>";
echo "<a href='path_to_page/usermanagement.php'>User Management</a>";
echo "</li><li>";
// and some more items
这里的"管理"是我的组标题，"用户管理"则是我的子组。现在使用上面的代码，我仍然无法在不同的页面上扩展我的菜单，这样用户就知道他在哪个页面上了
我发现了这个问题，出于某种奇怪的原因，它要求我首先声明变量：
var checkEle = $("#menu li ul li a").filter(function() {
return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase();
}).addClass("active")
.closest('ul'); //get the closest ul
console.log(checkEle);
checkEle.slideDown('normal');