Ajax的动态菜单

dynamic menu with Ajax

本文关键字：菜单 动态 Ajax      更新时间：2023-09-26

我正在从数据库中创建一个用户的动态菜单。当用户点击配置文件时，我需要突出显示该配置文件。这是配置文件的菜单。我的菜单工作得很好，我需要关于如何突出显示菜单元素的帮助。谢谢你的帮助。

function childMenu(profileId){
var path = location.pathname;
    $.ajax({
    type: 'POST',
    url: '',                  //the script to call to get data          
    data: "method=getChildProfile&profileId="+profileId,  //requirements 
    dataType: 'xml',                        //data format      
    success: function(xml)     
    {  
    $(xml).find('Child').each(function()
    {   
    var proId = $(this).attr('profileId');
    var lName = $(this).find('lName').text();
    var fName = $(this).find('fName').text();
    $("#childMenu").append("<li><a href='"+path+"?child="+proId+"&fName="+fName+"&lName="+lName+"'></a></li>");
    });
    }
    });
}

如果我说得对：（如果不是你想要的评论，我会编辑我的答案）

编辑附加行：

$("#childMenu").append("<li><a href='"+path+"?child="+proId+"&fName="+fName+"&lName="+lName+"' onClick='javascript:doHighlight(this)'>???</a></li>");

在JS:中添加一个新函数

function doHighlight(elem)
{
 if(elem.className == "highlighted")
   elem.className = "";
 else
   elem.className = "highlighted";
}

并在css中添加一个类：

.highlighted{
 background-color:yellow;
}

构建菜单后，需要添加一个点击事件处理程序，该处理程序将突出显示<li>

$('#childMenu li').click(function() {
    $('#childMenu li.selected').removeClass('selected');
    $(this).addClass('selected');
});

然后你可以用获得你选择的<li>

$('#childMenu li.selected')

你也可以编辑你的.select css类来改变背景颜色和其他你需要的东西。

相关文章：