Question

我正在尝试创建一个与此Flash网站上的菜单类似的菜单：

当我点击“投资组合”时，才会向子航行链接显示自己。现在我只是设法得到一个典型的垂直“在悬停菜单上显示子导航”工作。

所需要的是，一旦它适当的菜单项，它的子菜单显示。这个子菜单仍然显示，因为子菜单项目悬停在选中之后。选择子菜单项时，将显示内容，菜单和子菜单仍然可见（选定的菜单和子菜单项将显示不同的颜色以显示导航路径）。呼。

这是我的HTML：

<div id="nav">
<ul>
    <li><a href="#">about</a></li>
    <li><a href="#">testimonials</a>
        <ul>
          <li><a href="#">testimonial1</a></li>
          <li><a href="#">testimonial2</a></li>
          <li><a href="#">testimonial3</a></li>
          <li><a href="#">testimonial4</a></li>
        </ul>
    </li> 
     <li><a href="#">Services</a>
        <ul>
           <li><a href="#">services1</a></li>
           <li><a href="#">services2</a></li>
           <li><a href="#">services3</a></li>
           <li><a href="#">services4</a></li>
       </ul>
    </li> 
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</div><!--end #nav-->

这是我的css：

  #nav {
  width:160px;
  position: relative;
  top: 250px;
  left: 20px;
  }

 #nav ul {
 margin:0px; 
 padding:0px; 
 }

#nav ul li {
line-height:24px; 
list-style:none; 
}

#nav a {
text-decoration: none;
color: #9d9fa2;
}

#nav ul li a:hover {
position:relative;
color: #00aeef;
}

#nav ul ul {
display:none; 
position:absolute; 
left:160px; 
top:4px; 
}

#nav ul li:hover ul {
display:block;
color: #00aeef;
}

#nav ul ul li { 
width:160px; 
float:left; 
display:inline; 
line-height:16px; 
}

.selected {
color: #00aeef !important;
}

我应该给子菜单一个类，以便我可以隐藏然后显示它们吗？该课程将在何处应用？到了ul？我可以在两个子菜单中使用相同的类吗？我在应用显示器方面是错误的：没有为此目的的值？

非常感谢这里所有聪明人。

Answer 1

是否要通过使用JQuery单击主菜单项来显示/隐藏子菜单？如果是这样，您应该包括jquery.js文件和编写脚本，例如：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
        });
        function Reveal(a){
            var ul = a.parentNode.getElementsByTagName("UL").item(0);
            $j(ul).animate({height: 'toggle' ,opacity: 'toggle'}, "slow");
        }
</script>

然后你应该在菜单点击链接上调用功能Reveal：

<li><a href="#" onclick="Reveal(this);">testimonials</a>

你应该从hss中排除unhidding规则：

#nav ul li:hover ul {
/*display:block;*/
color: #00aeef;
}

我建议使用链接规则：

#nav ul a{outline:none;}

现在，通过点击主菜单项，子菜单将慢慢显示并消失。在JQuery中有很多动画制作功能。您可以了解他们的here

垂直导航，使用JQuery显示隐藏的子菜单

1 个答案: