当前位置: 代码迷 >> Java Web开发 >> 菜单有关问题,纠结了好久都不明白如何弄
  详细解决方案

菜单有关问题,纠结了好久都不明白如何弄

热度:6824   发布时间:2013-02-25 21:18:40.0
菜单问题,纠结了好久都不明白怎么弄
1、点击一级菜单怎么所有的二级菜单都显示啦,我只想点击该一级菜单只显示一级菜单的子菜单显示,不想显示所有的子菜单,该怎么弄了

2、鼠标hover到子菜单,子菜单不可以隐藏起来

这是我的源代码,请大侠帮忙

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>test2</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").hover(function(){
$(this).next("ul").show();
  相关解决方案