【在线等答案】基于asp.net用JQuery动态生成下拉导航条？？哪位高人指点下小弟
0
悬赏园豆：20
[已解决问题]
解决于 2012-03-18 18:42
小弟想做一个下拉导航条，要求菜单子项的数据都是从数据库得到。效果如下
但是现在每次移动到上面都会不断的加。现在对JQuery还不熟练 望高手指点下小弟。提供方法或思路帮忙实现下这个功能..在此感激不尽
页面代码：
<div id="menu">
<ul id="nav">
<li class="jquery_out">
<div class="jquery_inner">
<div class="jquery">
<span class="text">jquery</span><span class="smile">^_^</span>
</div>
</div>
</li>
<li class="mainlevel" id="mainlevel_01"><a href="http://www.lanrentuku.com/" target="_blank">试试看，有惊喜</a>
<ul id="sub_01">
<li><a href="http://www.lanrentuku.com/" target="_blank">北京</a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank">上海</a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank">浙江</a></li>
<li><a href="http://www.lanrentuku.com/" target="_blank">湖南</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_02"><a href="http://www.lanrentuku.com/" target="_blank">网络新词汇</a>
<ul id="sub_02">
<%--<li><a href="http://www.maitianquan.com/" target="_blank">晕哦！</a></li>
<li><a href="http://www.maitianquan.com/" target="_blank">神马呀？</a></li>
<li><a href="http://www.maitianquan.com/" target="_blank">Hold不住了！</a></li>
<li><a href="http://www.maitianquan.com/" target="_blank">顶你肺啊！</a></li>
<li><a href="http://www.maitianquan.com/" target="_blank">囧了。</a></li>
<li><a href="http://www.maitianquan.com/" target="_blank">打酱油e....</a></li>--%>
</ul>
</li>
</ul>
</div>
JS代码：
$(document).ready(function () {
$('li.mainlevel').mouseover(function () {
var choose = this;
//debugger;
$.getJSON("../RequestHandler/NavigateHandler.ashx?divID=" + $(this).attr("id"), null, function (json) {
$.each(json, function (i) {
$("<li><a href=" + json[i].weburl + " id=" + json[i].webid + ">" + json[i].webname + "</a></li>").appendTo(choose.all[1]);//我这边的choose.all[1]为什么不能直接用this.children(ul)呢？对JQuery的this确实不怎么理解，这边高手能否阐述下概念
//$("<li><a href=" + json[i].weburl + " id=" + json[i].webid + ">" + json[i].webname + "</a></li>").appendTo("#sub_01");
});
});
});
});
我QQ是490425093希望大侠都来相助
最佳答案
0
按照你问题”每次移动到上面都会不断的加"
这个只是思路问题而已，你的做法是鼠标移动的时候获取绑定菜单，
肯定你的菜单会在你的每次事件中增加了。。。
思路很简单，你只要在$(document).ready()中一次加载所有菜单就可以了！
然后绑定鼠标事件是显示详细菜单条目就OK了！
收获园豆：20
$(function(){
//加载你的菜单
$.getJSON("../RequestHandler/NavigateHandler.ashx?divID=" + $(this).attr("id"), null, function (json) {
$.each(json, function (i) {
$("<li><a href=" + json[i].weburl + " id=" + json[i].webid + ">" + json[i].webname + "</a></li>").appendTo(choose.all[1]);
//$("<li><a href=" + json[i].weburl + " id=" + json[i].webid + ">" + json[i].webname + "</a></li>").appendTo("#sub_01");
});
//绑定鼠标事件
$(li.mainlevel).mouseover(function(){
//$(this).css("display","block");
//显示菜单项目
});
});
哦。数据是加载的时候读取一遍就行了呀。
不过您可不可以告诉我一下就是在加载的时候就把每个菜单下的子项都对应吧。现在我用来追加的方法话$('li.mainlevel').mouseover(function () {
var choose = this;
//debugger;
$.getJSON("../RequestHandler/NavigateHandler.ashx?divid"), null, function (json) {
$.each(json, function (i) {
$("<li><a href=" + json[i].weburl + " >" + json[i].webname + "</a></li>").appendTo(choose.all[1]);
//$("<li><a href=" + json[i].weburl + " >" + json[i].webname + "</a></li>").appendTo("#sub_01");
});
});
}); 是调试的时候发现有这个的。您可以给我讲个其他的好方法么？麻烦您多指点下
@阿狸_Fox:
加载的时候就把每个菜单下的子项都对应吧
这个你可以把所有的主菜单ID(mainleve1,mainleve2)存放在一个数组或者集合里面，
然后循环请求对应的Json菜单子项目，并追加到主菜单下面就可以了。
@kaleroy: 哦 这样啊那我试试！呵呵 谢谢你哈！！那我结贴给你加分啦！！！
