菜单有关问题，纠结了好久都不明白如何弄
日期：2014-05-17 浏览次数：20707 次
菜单问题，纠结了好久都不明白怎么弄
1、点击一级菜单怎么所有的二级菜单都显示啦，我只想点击该一级菜单只显示一级菜单的子菜单显示，不想显示所有的子菜单，该怎么弄了
2、鼠标hover到子菜单，子菜单不可以隐藏起来
这是我的源代码，请大侠帮忙
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<style>
.left_ul{margin:0;padding:0;}
.left_ul li{float:left;list-style:none;width:100px;height:30px;line-height:30px;text-align:center;border:1px solid red;}
.left_ul li ul{margin:0;padding:0;display:none;}
.left_ul li ul li{list-style:none;width:100px;height:30px;line-height:30px;text-align:center;border:1px solid blue;}
</style>
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(".left_div li .one").hover(function(){
jQuery(".left_ul .children_ul").slideDown("slow");
},
function(){
jQuery(".left_ul .children_ul").slideUp("slow");
});
});
</script>
<body>
<div class="left_div">
<ul class="left_ul">
<li>
<div class="one">aa</div>
<ul class="children_ul">
<li>a1</li>
<li>a2</li>
</ul>
</li>
<li>
<div class="one">bb</div>
<ul class="children_ul">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
</li>
<li>
<div class="one">cc</div>
<ul class="children_ul">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ul>
</li>
<li>
<div class="one">dd</div>
<ul class="children_ul">
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
------解决方案--------------------
把你的JS代码换成
$(function(){
$("div"
1、点击一级菜单怎么所有的二级菜单都显示啦，我只想点击该一级菜单只显示一级菜单的子菜单显示，不想显示所有的子菜单，该怎么弄了
2、鼠标hover到子菜单，子菜单不可以隐藏起来
这是我的源代码，请大侠帮忙
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<style>
.left_ul{margin:0;padding:0;}
.left_ul li{float:left;list-style:none;width:100px;height:30px;line-height:30px;text-align:center;border:1px solid red;}
.left_ul li ul{margin:0;padding:0;display:none;}
.left_ul li ul li{list-style:none;width:100px;height:30px;line-height:30px;text-align:center;border:1px solid blue;}
</style>
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(".left_div li .one").hover(function(){
jQuery(".left_ul .children_ul").slideDown("slow");
},
function(){
jQuery(".left_ul .children_ul").slideUp("slow");
});
});
</script>
<body>
<div class="left_div">
<ul class="left_ul">
<li>
<div class="one">aa</div>
<ul class="children_ul">
<li>a1</li>
<li>a2</li>
</ul>
</li>
<li>
<div class="one">bb</div>
<ul class="children_ul">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
</li>
<li>
<div class="one">cc</div>
<ul class="children_ul">
<li>c1</li>
<li>c2</li>
<li>c3</li>
</ul>
</li>
<li>
<div class="one">dd</div>
<ul class="children_ul">
<li>d1</li>
<li>d2</li>
<li>d3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
------解决方案--------------------
把你的JS代码换成
$(function(){
$("div"
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
