帮助 JQuery 菜单上的“选定”项目答案

【问题标题】：Help with "selected" items on JQuery Menu帮助 JQuery 菜单上的“选定”项目
【发布时间】：2012-10-30 00:25:32
【问题描述】：

我正在尝试创建一个带有子菜单的简单垂直菜单。我希望突出显示所选项目以及子菜单是否被选中，以使其保持打开状态。

我迷路了:(

请帮我解决这个问题。这就是我目前所拥有的

<ul id="menu"> 
 <li><a href="/Source.aspx" > New </a></li>
 <li><a href="#"> New Transaction</a>
 <ul> 
 <li><a href="/Transaction.aspx?id=S">Shipment</a></li> 
 <li><a href="/Transaction.aspx?id=R">Reciept</a></li> 
 <li><a href="/Transaction.aspx?id=DA">Disassemble</a></li> 
 <li><a href="/Transaction.aspx?id=DS">Disposal</a></li> 
 </ul> </li>
 <li><a href="/Source.aspx?id=U">Correction</a></li>
 </ul>

这是我的 js：

function initMenu() {
    $("#menu ul").hide();
    $("#menu li a").click(function() {
    $("#menu li").removeClass('selected');
    $(this).parent().addClass('selected');
        $(this).next().slideToggle('normal');
    });
}
$(document).ready(function() {
    initMenu();

});

“selected”类应该以黄色突出显示菜单，现在当我点击它时它只是闪烁黄色然后消失...... 子菜单也不会保持打开状态:(((

【问题讨论】：

标签： jquery menu

【解决方案1】：

我想知道，你会拦截对链接的点击并进行一些 Ajax 加载吗？如果不是，则所选类消失是逻辑上的，因为页面更改/重新加载。

要解决这个问题，您可以编写一个 init 函数来检查 window.location 与您所有的菜单 href 并将选定的类添加到匹配...

提示：使用 firebug 检查元素的状态（例如检查选定的类是否在您的元素上），它将帮助您理解...

【讨论】：

【解决方案2】：

正如@Guillaume86 所说，我将下面发布的初始化代码放在了我的 document.ready 函数中。我觉得应该很容易理解：

.menu 是菜单链接类。该脚本检查所有菜单项的 href 属性是否等于实际页面位置，并使用 selected 或 not_selected 类更新所有菜单项。

$('.menu').each (function(){
    if ($(this).attr('href') == $(location).attr('href'))
        $(this).addClass('selected').removeClass('not_selected');
    else
        $(this).addClass('not_selected').removeClass('selected');
});

【讨论】：