87,991
社区成员
发帖
与我相关
我的任务
分享JS怎么写二级菜单呢？求助各位
因为调数据库的目录所以必须要分在两个容器中
结构：
<!--一级导航-->
<ul class='menu'>
<li class='menu-lei'></li>
<li class='menu-lei'></li>
...
</ul>
<!--二级菜单-->
<ul class='menu-sub'>
<li class='menu-sub-cnt' name='b'></li>
<li class='menu-sub-cnt' name='b'></li>
...
</ul>
自己写的JS,JQ
$(".menu-lei").hover(function(){
$w = $(this).index();
$(this).addClass("onover");
$(".menu-sub").css("display","block");
document.getElementsByName('b')[w].style.display='block';
},function(){
$(this).removeClass("onover");
$(".menu-sub").css("display","none");
$(".menu-sub-cnt").css("display","none");
}
出现问题：我的代码鼠标只要移出一级导航，二级菜单就消失了，实在想不出该怎么写这二级菜单的JQ，
参考的是淘宝，易迅等网站的侧边导航，麻烦大神在这个导航结构下给出解决方案
结构：
<!--一级导航-->
<ul class='menu'>
<li class='menu-lei'></li>
<li class='menu-lei'></li>
...
</ul>
<!--二级菜单-->
<ul class='menu-sub'>
<li class='menu-sub-cnt' name='b'></li>
<li class='menu-sub-cnt' name='b'></li>
...
</ul>
自己写的JS,JQ
$(".menu-lei").hover(function(){
$w = $(this).index();
$(this).addClass("onover");
$(".menu-sub").css("display","block");
document.getElementsByName('b')[w].style.display='block';
},function(){
$(this).removeClass("onover");
$(".menu-sub").css("display","none");
$(".menu-sub-cnt").css("display","none");
}
出现问题：我的代码鼠标只要移出一级导航，二级菜单就消失了，实在想不出该怎么写这二级菜单的JQ，
参考的是淘宝，易迅等网站的侧边导航，麻烦大神在这个导航结构下给出解决方案
...全文
请发表友善的回复…
发表回复
baisoft 2013-11-06
- 打赏
- 举报
1、你可以让一级菜单和二级菜单靠拢一些就可以了呀！
2、然后当鼠标移动到二级菜单上的时候首先就给二级菜单加一个show的方法。
fwings260 2013-11-06
- 打赏
- 举报
谢谢你的这个方案，
但是我需要做和淘宝，易迅的那种的侧边导航栏，往右边展开那种，像1L的那个配图[/quote]
其实有个很好的办法。。。你去淘宝首页，网页另存到本地，看看人家怎么实现的，套着用就明白了
huangtingjun123 2013-11-06
- 打赏
- 举报
谢谢你的这个方案，
但是我需要做和淘宝，易迅的那种的侧边导航栏，往右边展开那种，像1L的那个配图
别闹腰不好 2013-11-06
- 打赏
- 举报
当时写了N种实现方法 ，这个直接可以运行，只要把数据库的数据拿来放进去就可以了。
<!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>
别闹腰不好 2013-11-06
- 打赏
- 举报
<!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/index.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 language="javascript" type="text/javascript"
src="../js/caidan.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0">
<tr>
<td width="180" valign="top">
<div id="cd_zh">
<span id="toggle" onclick="toggleAll2();" style="cursor:pointer; margin-left:120px; ">全部展开</span>
<div id="caidan">
<div class="er" onclick="showMenuItems('mgroup_1')" style=" cursor:pointer;margin-top:5px;">菜单1</br></div>
<div id="mgroup_1" class="none">
<ul>
<li class="san" id="ite1"><a href="javascript:gotoUrl('mgroup_1','ite1','url');">菜单11</a></li>
<li class="san" id="ite2"><a href="javascript:gotoUrl('mgroup_1','ite2','url');">菜单12</a></li>
</ul>
</div>
<div class="er" onclick="showMenuItems('mgroup_2')" style="cursor:pointer; margin-top:5px;">菜单2</div>
<div id="mgroup_2" class="none">
<ul>
<li class="san" id="ite21"><a href="javascript:gotoUrl('mgroup_2','ite21','url');">菜单21</a></li>
<li class="san" id="ite22"><a href="javascript:gotoUrl('mgroup_2','ite22','url');">菜单22</a></li>
</ul>
</div>
</div>
</div>
</td>
<td></td>
</tr>
</table>
</body>
</html>
HTML 文件 直接可以用
别闹腰不好 2013-11-06
- 打赏
- 举报
function toggleAll2(){
if ($("#toggle").text() == "全部展开")
{
$(".none").each(function(){
$(this).slideDown();
})
$("#toggle").html("全部收起");
}
else {
$(".none").each(function(){
$(this).slideUp();
})
$("#toggle").html("全部展开");
}
}
function toggles(){
$("#toggle").toggle(
function(){$(".none").each(function(){
$(this).slideDown();
})
$("#toggle").html("全部收起");},
function(){$(".none").each(function(){
$(this).slideUp();
})
$("#toggle").html("全部展开");}
);
}
function showMenuItems(id){
$("#"+id).slideToggle();
}
function gotoUrl(_groupid, _itemid, url){
$.cookie('menu_group_id', _groupid, {path: '/'});
$.cookie('menu_item_id', _itemid, {path: '/'});
window.location.href="../html/新建 文本文档.html";
}
$(document).ready(function(){
var _groupid = $.cookie('menu_group_id');
if(_groupid){
$("#"+_groupid).show();
}
var _itemid = $.cookie('menu_item_id');
if(_itemid){
$("#"+_itemid).attr("class","dqsan");
}
});
caidan.js
huangtingjun123 2013-11-06
- 打赏
- 举报
HTML结构是
<!--一级导航-->
<ul class='menu'>
<li class='menu-lei' name='a1'></li>
<li class='menu-lei' name='a2'></li>
...
</ul>
<!--二级菜单-->
<ul class='menu-sub'>
<li class='menu-sub-cnt a1'></li>
<li class='menu-sub-cnt a2'></li>
...
</ul>
huangtingjun123 2013-11-06
- 打赏
- 举报
[/quote]
那就用后面讲的方法吧，二级菜单给定个position：abusolute；
然后加个class，给一级菜单加name，然后通过name和class关联定义显示和隐藏呗[/quote]
我已经是这样子写了呀，我上面就有通过一层菜单的index来控制2层菜单，但是我鼠标移出一层菜单二层菜单就消失了，虽然知道hover函数就是这样，但是不知道别的写法了，怎么让鼠标移出1层菜单延迟几秒，2层菜单时还继续显示，直到鼠标移出2层菜单才消失[/quote]
明白你问的问题了，你定义hover时间的时候，选择器吧一级菜单选项和对应的二级菜单都写上就OK了
$(".menu-lei,."+item).hover(
var item=$(".menu-lei").attr("name");
function(){}，function(){}
)这样子,
不过这样把选择器内的东西定义在函数内部不知道可行不......没试过....
不行的话就给hide（）加delay吧，应该可以[/quote]
加了delay也不行呢
$(".menu-lei").hover(function(){
$(this).addClass("onover");
$(".menu-sub").show(); //二级菜单容器
var item1 = $(this).attr("name");
$("."+item1).show(); //二级菜单内容显示
},
function(){
$(this).removeClass("onover");
$(".menu-sub").hide();
var item1 = $(this).attr("name");
$("."+item1).hide();
})
想法挺简单的，其实就是让hover的第二个function不要调用这么快，并且鼠标停留在二级菜单的时候停止执行，但是不知该怎么写呀，我是个初学者来的，写JQ是边看手册边写的，哭
huangtingjun123 2013-11-06
- 打赏
- 举报
[/quote]
那就用后面讲的方法吧，二级菜单给定个position：abusolute；
然后加个class，给一级菜单加name，然后通过name和class关联定义显示和隐藏呗[/quote]
我已经是这样子写了呀，我上面就有通过一层菜单的index来控制2层菜单，但是我鼠标移出一层菜单二层菜单就消失了，虽然知道hover函数就是这样，但是不知道别的写法了，怎么让鼠标移出1层菜单延迟几秒，2层菜单时还继续显示，直到鼠标移出2层菜单才消失[/quote]
明白你问的问题了，你定义hover时间的时候，选择器吧一级菜单选项和对应的二级菜单都写上就OK了
$(".menu-lei,."+item).hover(
var item=$(".menu-lei").attr("name");
function(){}，function(){}
)这样子,
不过这样把选择器内的东西定义在函数内部不知道可行不......没试过....
不行的话就给hide（）加delay吧，应该可以[/quote]
谢谢你，我去试看看~
fwings260 2013-11-06
- 打赏
- 举报
[/quote]
那就用后面讲的方法吧，二级菜单给定个position：abusolute；
然后加个class，给一级菜单加name，然后通过name和class关联定义显示和隐藏呗[/quote]
我已经是这样子写了呀，我上面就有通过一层菜单的index来控制2层菜单，但是我鼠标移出一层菜单二层菜单就消失了，虽然知道hover函数就是这样，但是不知道别的写法了，怎么让鼠标移出1层菜单延迟几秒，2层菜单时还继续显示，直到鼠标移出2层菜单才消失[/quote]
明白你问的问题了，你定义hover时间的时候，选择器吧一级菜单选项和对应的二级菜单都写上就OK了
$(".menu-lei,."+item).hover(
var item=$(".menu-lei").attr("name");
function(){}，function(){}
)这样子,
不过这样把选择器内的东西定义在函数内部不知道可行不......没试过....
不行的话就给hide（）加delay吧，应该可以
huangtingjun123 2013-11-06
- 打赏
- 举报
[/quote]
那就用后面讲的方法吧，二级菜单给定个position：abusolute；
然后加个class，给一级菜单加name，然后通过name和class关联定义显示和隐藏呗[/quote]
我已经是这样子写了呀，我上面就有通过一层菜单的index来控制2层菜单，但是我鼠标移出一层菜单二层菜单就消失了，虽然知道hover函数就是这样，但是不知道别的写法了，怎么让鼠标移出1层菜单延迟几秒，2层菜单时还继续显示，直到鼠标移出2层菜单才消失
fwings260 2013-11-06
- 打赏
- 举报
[/quote]
那就用后面讲的方法吧，二级菜单给定个position：abusolute；
然后加个class，给一级菜单加name，然后通过name和class关联定义显示和隐藏呗
huangtingjun123 2013-11-06
- 打赏
- 举报
我没办法把二级菜单中的目录放到一级菜单呀，必须要分开的，因为后台用了2次foreach调用了两次
fwings260 2013-11-06
- 打赏
- 举报
把你的二级菜单包在一级菜单的<li>里面，比如：
<ul class='menu'>
<li class='menu-lei'>
<!--二级菜单-->
<ul class='menu-sub'>
<li class='menu-sub-cnt' name='b'></li>
<li class='menu-sub-cnt' name='b'></li>
...
</ul>
</li>
<li class='menu-lei'></li>
...
</ul>
然后jquery可以这样写：
$(".menu-sub").hide()
$(".menu-lei").hover(
var self=this;
function(){$(this).find(".menu-sub").show()},
function(){$(this).find(".menu-sub").hide()}
)
其他就是一些样式的问题
我一直是这样写的，不知有什么问题
另外，如果按照楼主的结构，分出来写的话，可以把每个一级菜单的标签加name，比如：name="item1"
然后给每个对应的二级菜单加上对应的class，比如class=".menu-sub item1"
这样hover的时候可以:
var item=$(this).attr("name")
$("."+item).show();
