不刷新页面,实现动态滑动菜单的问题!(高手请进)

菜单栏,分两级,要求菜单有滑动效果,即点某大栏,收起其他打开的小栏(如果有打开),展开该大栏内的小栏.小栏要求从数据库动态读取.要求,不刷新页面达到效果.做了很多实验,都不能两全,不知道高手们有什么办法处理(js是肯定要的,感觉比较麻烦).

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title> LAjaxTree DEMO: Ajax折叠树形菜单演示</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,[email protected]">
<meta name="keywords" content="LAjaxTree DEMO: Ajax折叠树形菜单演示" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/l_ajaxtree.css" type="text/css" media="all" />
<script type="text/javascript" src="LAjaxTree.js"></script>
</head>
<body>
<div id="LAjaxTree">
<h3>游戏网游</h3>
<dl class="Data close" id="Sub_1">
<dt class="C2">
<ul>
<li><a href="#">网络游戏</a></li>
<li id="No_2" class="hasChild"><a href="#">游戏下载</a></li>
<li><a href="#">客户端下载</a></li>
<li id="No_4" class="hasChild"><a href="#">游戏论坛</a></li>
<li><a href="#">休闲游戏</a></li>
<li><a href="#">跑跑卡丁车</a></li>
<li><a href="#">魔兽世界</a></li>
</ul>
</dt>
</dl>
<dl class="Data close" id="Sub_2">
<dt class="C2">
<ul>
<li><a href="#">魔兽争霸</a></li>
<li><a href="#">泡泡堂</a></li>
<li><a href="#">网金2</a></li>
<li><a href="#">梦幻西游</a></li>
<li><a href="#">封神榜</a></li>
<li><a href="#">劲乐团</a></li>
<li><a href="#">劲舞团</a></li>
</ul>
</dt>
</dl>
<dl class="Data close" id="Sub_3">
<dt class="C2">
<ul>
<li><a href="#">棋牌_对战</a></li>
<li><a href="#">传奇</a></li>
<li><a href="#">CS反恐精英</a></li>
<li><a href="#">街头篮球</a></li>
<li><a href="#">帝国时代</a></li>
<li><a href="#">江湖社区</a></li>
<li id="No_21" class="hasChild"><a href="#">其它游戏专题</a></li>
</ul>
</dt>
</dl>
<h3>明星美女</h3>
<dl class="Data close" id="Sub_4">
<dt class="C2">
<ul>
<li><a href="#">港台明星</a></li>
<li><a href="#">大陆明星</a></li>
<li><a href="#">国外明星</a></li>
<li><a href="#">模特明星</a></li>
<li id="No_26" class="hasChild"><a href="#">追星一族</a></li>
<li><a href="#">写真集</a></li>
</ul>
</dt>
</dl>
</div>
<script type="text/javascript">

</script>
</body>
</html>
atlas就有这样的例子呵呵
To:eastjazz，
我需要的是“菜单有滑动效果,即点某大栏时,其他打开的大栏都能收起,该大栏内的小栏全部展开”，而不是你的那种展开效果，而且你也没有动态从数据库中读取没个小栏的功能呀？！
Q: 做了很多实验,都不能两全,不知道高手们有什么办法处理(js是肯定要的,感觉比较麻烦).
————————————————————————————————————————————
A: 最近有很多这方面“无刷新”的问题。我基本上不在asp.net这里回答这类问题的，因为我觉得大多数人对postback模式下asp.net尚且没有理解五分之一，我在这个回答callback甚至ajax的问题其实是对牛弹琴的。所以我这里拿 www.a0923.com（这个空间还没有正式启用，因此放的是我购买空间前用来测试Ajax、下载等功能测试站点）上面那个日历来说说我认为Ajax程序应该实现什么功能。源代码：Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.AjaxClick
    Dim PP As MasterAjaxPage = DirectCast(Me.Page, GlobalDomain.Services.MasterAjaxPage)
    If CalendarContainer.Controls.Count = 0 Then
        Dim C As New Calendar
        C.ID = "rili"
        CalendarContainer.Controls.Add(C)
        AddHandler C.SelectionChanged, AddressOf Calendar_SelectionChanged
        AddHandler C.VisibleMonthChanged, AddressOf calendar_VisibleMonthChanged
        AddHandler C.DayRender, AddressOf _c_DayRender
        PP.AddDHTMLRender(CalendarContainer)
        LinkButton1.Text = "日历回去"
        LinkButton1.Style("color") = "green"
        PP.AddDHTMLRender(sender)
        PP.AddClientScript("alert('测试Ajax：当你点击日期的时候，看到的是服务器上的时钟，而不是客户端的！" + _
            "并且只有最后点击的日期从服务器上重新刷新。');")
    Else
        CalendarContainer.Controls.Clear()
        PP.AddDHTMLRender(CalendarContainer)
        LinkButton1.Text = "日历出来"
        PP.AddDHTMLRender(Me.CalendarContainer)
    End If
End SubProtected Sub Calendar_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    RefreshCellOfDay = DirectCast(sender, Calendar).SelectedDate.Day
    MasterAjaxPage.RenderAnyControl(sender)
End SubProtected Sub calendar_VisibleMonthChanged(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs)
    DirectCast(sender, Calendar).VisibleDate = e.NewDate
    Dim PP As MasterAjaxPage = DirectCast(Me.Page, GlobalDomain.Services.MasterAjaxPage)
    PP.AddDHTMLRender(sender)
End SubPrivate RefreshCellOfDay As IntegerProtected Sub _c_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs)
    If e.Cell.ID Is Nothing Then e.Cell.ID = "Cell" & e.Day.Date.Day
    If e.Day.Date.Day = RefreshCellOfDay Then
        Dim P As New Label
        P.ForeColor = Drawing.Color.Red
        P.Text = "<br><span style=""font-size:smaller"">" + DateTime.Now.ToString + "</span>"
        e.Cell.Controls.Add(P)
        DirectCast(Me.Page, GlobalDomain.Services.MasterAjaxPage).AddInnerRender(e.Cell)
    End If
End Sub要点有：
1. 使用普通的PostBack控件，基本不需要修改就能使用（不要搞另外一套开发语言，更不要即寄希望与javascript那样的低级语言），但是必须在保持ViewState、创建框架等方面比传统的PostBack程序的后台服务方面快10倍。
2. 如GlobalDomain.Services.MasterAjaxPage所示，需要对Page进行扩展，使之在页面第一次产生html时向客户端输出少量javascript管理程序。
3. 如AddDHTMLRender和AddInnerRender方法所示，后台程序可以通知MasterAjaxPage应该将哪些控件刷新到客户端。这是因为Ajax并不是像PostBack模式那样利用Page对象的Render输出的，它仅仅输出少部分改变了ui的控件。
4. 如AddClientScript所示的那样，客户端可以随时输出一个javascript程序代码到客户端执行。满足了以上几个功能，你的程序就可以迅速将任何传统的PostBack程序改变为Ajax程序。此时你使用menu、treeview、gridview、formview等等先把程序调试好（例如在page.StartNavigation=true条件下看效果），然后稍加修改原来的所有事件添加上一条AddDHTMLRender或者AddClientScript语句（因为PoatBack默认是对整个控件树输出，所以从来不用单独通知页面哪些局部要刷新，而Ajax就需要增加这个功能），整个项目就改为Ajax的了。
最后我总结我的意思：你要懂一个全面的 Ajax 框架，而不是就非常某个具体问题就事论事地搞一堆的javascript代码，Ajax框架需要从基础上搞通几个问题就一通百通了。
这个程序写了很久了，我一直没有仔细看过。要不是帖这个回帖，我还没能发现一个小Bug：PP.AddDHTMLRender(Me.CalendarContainer)  -->  PP.AddDHTMLRender(sender)
上面这个程序里的 AddInnerRender(e.Cell) 这一指令是告诉页面要将客户端点击得那个日期单元格刷新。你可以把这个看作我的你问题的解释——用同样的指令仅仅刷新改变了的那几个TreeNode，而其它的不需要产生任何输出。但是我没有把法直接回答你的用大堆javascript来实现你的菜单的问题，因为我是解决“所有”控件的Ajax通讯问题，而不是某个具体的控件。我认为Atlas的UpdatePanel或者是magicAjax的panel效率低得太多，也不能非常精细地任意指定很细小的控件刷新而只能指定很离谱的大控件，例如在仅仅有一个单元格改变了的时候不容易指定GridView中任意一个单元格刷新而往往只能指定整个GridView控件进行大面积刷新，因此这两个功能是“伪Ajax”。但是不管怎么说，你使用一种Ajax编程框架，而不要以为javascipt低级编程是万能的。计算机软件是一堆0、1代码，但是一堆0、1代码不一定是计算机软件，因此低级的代码程序由于看不出思路，很可能是滥竽充数的。
To:sp1234:
你上面说的是对于Ajax的,那问题是.net下怎么处理?!
汗~~~