Question

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

我太丢失了:(

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

<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();

});

“已选择”类应该以黄色突出显示菜单，现在当我点击它并消失时它只是闪烁黄色... 子菜单不会保持打开：（（

Answer 1

我想知道，您是否拦截了链接上的点击并进行了一些Ajax加载？如果你不是，那么选择的类会消失，因为页面改变/重新加载。

要解决此问题，您可以编写一个init函数，根据所有菜单href检查window.location，并将所选类添加到匹配中...

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

Answer 2

正如@ Guillaume86所说，我把下面发布的init代码放在我的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');
});

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

2 个答案: