Jquery 侧导航切换

Question

我有一个侧边导航，我希望导航中的每个列表项都是可点击的，这会启动该部分的更多选项的切换。

到目前为止，我已经整理了一些粗略的代码来尝试演示我在说什么。红色列将是由第一列上的每个链接触发的切换部分。然而，我的主要问题是有效实现这一目标的最佳方法。显然有 7 个链接，这意味着我需要 7 个切换。

JS fiddle :http://jsfiddle.net/visualdecree/Be6ry/31/ *编辑 - 我要求 7 个链接都有一个单独的 div，可以使用不同的选项进行切换。

我是否有 7 个隐藏的 div，由 7 个不同的触发器切换？

如有任何帮助，我们将不胜感激。

Answer 1

请查看这个更新的 fiddle ，http://jsfiddle.net/Be6ry/21/

您需要做的就是使用正确的选择器查找它们，并将处理程序附加到单击事件一次。

$(".sidenav li a").click(function(){
    alert("you have clicked on "+$(this).text());
});​

澄清解决方案

1- $(".sidenav li a")

此选择器将查找 li 列表中的所有 anchor 并保存对它们的引用。

2- .click(function(){}

这会将处理程序附加到前一个选择器保留引用的所有 DOM 元素的单击事件。

3- alert("您点击了 "+$(this).text());

这只是一个示例操作，您可以在这里做任何您想做的事情。

这里不需要使用 7 个不同的处理程序:)