使用扩展SubNav进行水平导航

Question

所以我一直在寻找一段时间而无法找到答案。

我要做的是导航4个左右的主要导航主题。单击每个主题将在与该主题相关的子项目列表下方展开（即，单击“硬件”，将显示所有硬件子主题。）

这个想法类似于你在thecomedynetwork.ca上点击“显示”的内容。

我也希望当他们点击另一个主导航时，subnav将关闭并打开新的subnav（即'Hardware'将关闭，'Software'将打开）。

很抱歉，如果我非常模糊，我会发布代码，但我实际上正在废弃我正在尝试的所有内容。

更新： 因此，当我以为我已经钉它时，我无法正确执行此事。 jsfiddle正在展示它如何工作我需要它（减去明显的抛光，如缓和）：http://jsfiddle.net/HGTKZ/1/

var divs = $('#nav div'),
links = $('a');

links.click(function () {
$(this.hash).toggle().siblings().hide();
return false;
});

但是当发布这件事时就不行了： http://agiile.com/testing6.html

我将jquery链接起来（距离Google API 1.9.1分钟）并且我没有语法错误......但这个看似简单的代码将无法运行！

顺便说一句，如果有人建议改进我的HTML并且不使用#software，＃hardware等那就太棒了。 javascript：void（0）会更好，但我想不出如何在这种情况下使它工作。

感谢迄今为止帮助我们的人们！

Answer 1

您之前应该搜索过Google。

无论如何，搜索“CSS Navigation”栏。你会发现很多例子。他们会做的。

<强>

好的，那么你可以建立一个这样的菜单

1. 最初使用CSS隐藏它

   。菜单{    display：none; }

2. 设置事件处理程序以切换+动画子菜单显示。

3. 对该slideDown动画使用Jquery。

Answer 2

事实上。如果您使用Google进行“Jquery下拉列表”或“Javascript下拉列表”，您会发现以下内容：

http://css-tricks.com/simple-jquery-dropdowns/

这应该对我有帮助;）

Answer 3

至于我的更新工作在jsfiddle.net上的问题，在运行后从jsfiddle.net/draft获取代码似乎已经修复了！

不完全确定代码在哪里出错，但它现在正在运行。谢谢你们！