jquery - 如何为使用 Html.MvcSiteMap().Menu() 创建的菜单添加吸引人的 jquery 效果？

Question

我正在尝试更改主站点导航菜单的外观，到目前为止，我已经能够识别 css 属性并更改背景图像和字体样式，但我想让子菜单“向下滑动”或“在页面上淡入。

据我所知*使用了 MvcSiteMap，代码通过将子菜单的可见性设置为“无”，然后在悬停时设置为“可见”来工作。有谁知道如何找到控制这种行为的 jquery/javascript 文件？

如果有帮助，我将附加菜单的 css 结构：

<nav id="menu">
  <ul class="dropdown">
   <li class>
     <a href ="/About">About</a>
     <ul class="sub_menu" style="visibility:hidden;">
       <li class>
         <a href="/About/Team">Team</a>
       </li>
       <li class>
         <a href="/About/History">Story</a>
       </li>
     </ul>
   </li>
   ..etc...
  </ul>
</nav>

*我不是创建站点导航菜单的人，我最近接手了一个 Web 开发项目，到目前为止该项目的文档记录很差，并且没有以前的团队成员留下，所以我不能问他们，因为我对此很陌生不知道如何找出这是如何工作的。

Answer 1

这是一个基本的开始......因此您可以使用 css 完成并添加一些其他动画或行为

运行版本：http: //jsfiddle.net/LUVTQ/

html

<nav id="menu">
  <ul class="dropdown">
   <li>
     <a class="main_option" href ="/About">About</a>
     <ul class="sub_menu" style="display:none;">
       <li class>
         <a href="/About/Team">Team</a>
       </li>
       <li class="main_option">
         <a href="/About/History">Story</a>
       </li>
     </ul>
   </li>
   <li>
     <a class="main_option" href ="/About">Etc</a>
     <ul class="sub_menu" style="display:none;">
       <li class>
         <a href="/About/Team">Team</a>
       </li>
       <li class="main_option">
         <a href="/About/History">Story</a>
       </li>
     </ul>
   </li>
   ..etc...
  </ul>
</nav>​

和脚本

$(document).ready(function(){
    $('a.main_option').click(toggleMainOption);    
});

function toggleMainOption(){
    $(this).next('.sub_menu').slideToggle('fast');
    return false;
}