使用 JQuery 在单击时显示隐藏子菜单的垂直导航 [英] vertical navigation that shows hidden submenu on click using JQuery

问题描述

我正在尝试制作一个与此 Flash 网站上的菜单类似的菜单:

I am trying to make a menu that works like the one on this flash site:

http://elevensix.de/

当我点击投资组合"时，只有到子导航链接显示自己.现在我只设法让一个典型的垂直悬停菜单上的显示子导航"工作.

When I click "portfolio", only then to the subnavigation links reveal themselves. Right now I have only managed to get a typical vertical "reveal subnavigation on hover menu" working.

需要的是，一旦它点击了适当的菜单项，它的子菜单就会显示出来.当子菜单项悬停在然后被选中时，该子菜单仍然显示.当子菜单项被选中时，内容显示，菜单和子菜单都保持可见(选定的菜单和子菜单项被赋予不同的颜色以显示导航路径).呼.

What is required is that once the appropriate menu item it cicked, its submenu shows. This submenu remains revealed as the submenu items are hovered over then selected. When the submenu item is selected, the content shows, and both the menu and submenu remain visible (the selected menu and submenu item are given a distinct colour to show the navigation path). Whew.

这是我的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?我可以对两个子菜单使用相同的类吗?我为此目的应用 display:none 值的方式有误吗?

Should I be giving the submenus a class so that I can hide then show them? And where would the class be applied? To the ul? could I use the same class for both submenus? Am I wrong in how I am applying the display:none values for this purpose?

非常感谢这里所有聪明的人.

Many thanks to all the clever people on here.

推荐答案

你想使用 JQuery 通过点击主菜单项来显示/隐藏子菜单吗?如果是这样，你应该包含 jquery.js 文件并编写脚本，例如:

Do you want to show/hide submenu by click on item of main menu using JQuery? If it's so, you should include jquery.js file and write script, such as:

<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:

Then you should call function Reveal on click link of menu:

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

您应该排除悬停的 li 从 css 中取消隐藏的规则:

You should exclude rule of unhidding from css for hovered li:

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

我建议对链接使用大纲规则:

And I recommend to use rule of outlining for links:

#nav ul a{outline:none;}

现在点击主菜单项，子菜单会慢慢出现和消失.JQuery 中有许多动画函数.你可以了解他们的这里

Now submenu will slowly appear and disappear by click on item of main menu. There are many functions for animating in JQuery. You can learn their here

这篇关于使用 JQuery 在单击时显示隐藏子菜单的垂直导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！