现时需要做一个多级导航栏，求思路，求实现
日期：2014-05-18 浏览次数：20797 次
现在需要做一个多级导航栏，求思路，求实现
之前做的时候是一级菜单一个list，二级菜单一个list；
现在要加三级菜单了，感觉不能像以前那么做了。
求教怎么做合适呢？
数据库：mysql。。
朋友告诉我用递归，可是没用过，不会用哇。
大神们有没有其他好的实现方案呢？
------解决方案--------------------
<!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">
<head>
<title>第一个简单的jQuery程序</title>
<link type="text/css" rel="stylesheet" href="../css/fristDiv.css" />
<script language="javascript" type="text/javascript"
src="../js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var str=[{caidan:"菜单1",son:[{name:"菜单11",url:"ddd",id:"11"},{name:"菜单12",url:"ddd",id:"12"},{name:"菜单13",url:"ddd",id:"13"}]},
{caidan:"菜单2",son:[{name:"菜单21",url:"ddd",id:"21"},{name:"菜单22",url:"ddd",id:"22"},{name:"菜单23",url:"ddd",id:"23"}]},
{caidan:"菜单3",son:[{name:"菜单31",url:"ddd",id:"31"},{name:"菜单32",url:"ddd",id:"32"},{name:"菜单33",url:"ddd",id:"33"}]}];
var str1=$("<div class=\"fristDiv\"></div>").css("width","180px").appendTo($("body"));
var st=$("<ul></ul>").appendTo($(".fristDiv"));
$(str).each(function(cs,ts){
var li=$("<li class=\"hmain\"></li>");
$("<div class=\"er\" ></div>").text(ts.caidan).appendTo(li);
var ul=$("<ul></ul>");
$.each(ts.son,function(ps,pt){
var py=$("<li class=\"san\">"+pt.name+"</li>").attr("id",pt.id).appendTo(ul);
py.click(function(){
$.cookie('id', pt.id, {path: '/'});
window.location.href="../html/javaScript.html";
});
});
ul.appendTo(li);
li.appendTo(st);
});
var _itemid = $.cookie('id');
if(_itemid){
$("#"+_itemid).css("background-image","url(../images/z_35.jpg)");
}
$(".hmain").hover(function(){
$(this).children("ul").slideToggle();
},function(){
$(this).children("ul").slideToggle();
});
});
</script>
</head>
<body>
</body>
</html>
------解决方案--------------------
递归这里有，绑定好父id 剩下的就是js控制显示 然后就没什么问题了
http://blog.csdn.net/chenghui0317/article/details/9426759
------解决方案--------------------
表的设计在基础字段上面加一个父id，这样每次查询可以根据这种父子关联关系 一直查到所有的记录。。
------解决方案--------------------
其实用递归还不如自己写进去呢？递归很慢的。
------解决方案--------------------
迭代查询出来之后不就是一个列表吗？？然后用你说的list封装，然后展示在前台，这个应该蛮简单的吧？
之前做的时候是一级菜单一个list，二级菜单一个list；
现在要加三级菜单了，感觉不能像以前那么做了。
求教怎么做合适呢？
数据库：mysql。。
朋友告诉我用递归，可是没用过，不会用哇。
大神们有没有其他好的实现方案呢？
导航栏
菜单
------解决方案--------------------
<!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">
<head>
<title>第一个简单的jQuery程序</title>
<link type="text/css" rel="stylesheet" href="../css/fristDiv.css" />
<script language="javascript" type="text/javascript"
src="../js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var str=[{caidan:"菜单1",son:[{name:"菜单11",url:"ddd",id:"11"},{name:"菜单12",url:"ddd",id:"12"},{name:"菜单13",url:"ddd",id:"13"}]},
{caidan:"菜单2",son:[{name:"菜单21",url:"ddd",id:"21"},{name:"菜单22",url:"ddd",id:"22"},{name:"菜单23",url:"ddd",id:"23"}]},
{caidan:"菜单3",son:[{name:"菜单31",url:"ddd",id:"31"},{name:"菜单32",url:"ddd",id:"32"},{name:"菜单33",url:"ddd",id:"33"}]}];
var str1=$("<div class=\"fristDiv\"></div>").css("width","180px").appendTo($("body"));
var st=$("<ul></ul>").appendTo($(".fristDiv"));
$(str).each(function(cs,ts){
var li=$("<li class=\"hmain\"></li>");
$("<div class=\"er\" ></div>").text(ts.caidan).appendTo(li);
var ul=$("<ul></ul>");
$.each(ts.son,function(ps,pt){
var py=$("<li class=\"san\">"+pt.name+"</li>").attr("id",pt.id).appendTo(ul);
py.click(function(){
$.cookie('id', pt.id, {path: '/'});
window.location.href="../html/javaScript.html";
});
});
ul.appendTo(li);
li.appendTo(st);
});
var _itemid = $.cookie('id');
if(_itemid){
$("#"+_itemid).css("background-image","url(../images/z_35.jpg)");
}
$(".hmain").hover(function(){
$(this).children("ul").slideToggle();
},function(){
$(this).children("ul").slideToggle();
});
});
</script>
</head>
<body>
</body>
</html>
------解决方案--------------------
递归这里有，绑定好父id 剩下的就是js控制显示 然后就没什么问题了
http://blog.csdn.net/chenghui0317/article/details/9426759
------解决方案--------------------
表的设计在基础字段上面加一个父id，这样每次查询可以根据这种父子关联关系 一直查到所有的记录。。
------解决方案--------------------
其实用递归还不如自己写进去呢？递归很慢的。
------解决方案--------------------
迭代查询出来之后不就是一个列表吗？？然后用你说的list封装，然后展示在前台，这个应该蛮简单的吧？
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
