Javascript 在jquery中显示带有基本鼠标悬停事件的菜单_Javascript_Jquery_Html_Css

Javascript 在jquery中显示带有基本鼠标悬停事件的菜单

javascript jquery html css

Javascript 在jquery中显示带有基本鼠标悬停事件的菜单,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在鼠标悬停在主菜单项上时显示菜单项列表，同时隐藏以前显示的菜单项。但效果并没有变得有效。我想jquery下面的代码不适合我所希望的。谢谢 <html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).read(function

我想在鼠标悬停在主菜单项上时显示菜单项列表，同时隐藏以前显示的菜单项。但效果并没有变得有效。我想jquery下面的代码不适合我所希望的。谢谢

<html>
<head>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
  <script type="text/javascript">
      $(document).read(function(){
         $("MainMNItem:not(:first)").hide();
         $("MainMNItem a").mouseover(function()
         {
             $("Item:visible").slideUp("slow");
             $(this).parent().next().slideDown("slow");
         });
      });
  </script> 
  <style>
     body{font-family:"Times New Roman"; font-size:16px;}
     Menu{width:330px;}
     Item a{color:#000;}
     Item{margin:0;}
     MainMNItem{background:#f11;font-size:18px;padding:5px;width:330px;} 
     MainMNItem a{color:#fff;}
     ul{list-style:none;padding:5px;}
  </style>  
</head>
<body>
   <Menu>
       <MainMNItem><a href="#">Home</a></MainMNItem> 
       <Item>
           <ul>
               <li><a href="#">Index</a></li>
               <li><a href="#">Documents</a></li>
           </ul>
       </Item>
       <MainMNItem><a href="#">About Us</a></MainMNItem>
       <Item>
           <ul>
               <li><a href="#">History</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </Item>
   </Menu>
</body>
</html>


$（文档）.read（函数（）{
$（“mainnitem:not（：first）”）.hide（）；
$（“mainnItem a”）.mouseover（函数（）
{
$（“项目：可见”）.slideUp（“慢速”）；
$（this.parent（）.next（）.slideDown（“slow”）；
});
});
正文{字体系列：“Times New Roman”；字体大小：16px；}
菜单{宽度：330px；}
a项{颜色：#000；}
项目{页边距：0；}
mainnitem{background:#f11；字体大小：18px；填充：5px；宽度：330px；}
MainMNItem a{颜色：#fff；}
ul{列表样式：无；填充：5px；}

首先，它应该是

$（文档）.ready（函数（）{
...
});

不

read（）

。如果你需要帮助，请给出更好更准确的解释

谢谢，我自己动手了，现在可以用了。谢谢你的指点

<html>
<head>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
  <script type="text/javascript">
      $(document).read(function(){
         $("MainMNItem:not(:first)").hide();
         $("MainMNItem a").mouseover(function()
         {
             $("Item:visible").slideUp("slow");
             $(this).parent().next().slideDown("slow");
         });
      });
  </script> 
  <style>
     body{font-family:"Times New Roman"; font-size:16px;}
     Menu{width:330px;}
     Item a{color:#000;}
     Item{margin:0;}
     MainMNItem{background:#f11;font-size:18px;padding:5px;width:330px;} 
     MainMNItem a{color:#fff;}
     ul{list-style:none;padding:5px;}
  </style>  
</head>
<body>
   <Menu>
       <MainMNItem><a href="#">Home</a></MainMNItem> 
       <Item>
           <ul>
               <li><a href="#">Index</a></li>
               <li><a href="#">Documents</a></li>
           </ul>
       </Item>
       <MainMNItem><a href="#">About Us</a></MainMNItem>
       <Item>
           <ul>
               <li><a href="#">History</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </Item>
   </Menu>
</body>
</html>