jquery - Jquery sidenav 切换

Question

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

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

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

我会有 7 个由 7 个不同触发器切换的隐藏 div 吗？

对此的任何帮助将不胜感激。

Answer 1

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

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

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

澄清解决方案

1-$(".sidenav li a")

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

2-.click(function(){}

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

3- alert("you have clicked on "+$(this).text());

只是一个示例动作，在这里做任何你想做的事情。

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

Answer 2

jQuery：

$(".sn a").on('click',function(){
    var panID = $("#" + $(this).data('panel') );
    $("div[id*='sn-pan-']").hide({slide:'toggle'}, 1000);
    $(panID).css("left","100px").animate({width:'toggle'}, 500)
})​;

侧导航 HTML：

<ul class="sidenav">
    <li class="sn"><a href="#" data-panel="sn-pan-1">Lorem</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-2">Ipsum</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-3">Dolar</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-4">Sit</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-5">Amet</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-6">Et</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-7">Donut</a></li>
 </ul>

侧导航面板 HTML：

 <!-- hidden panel that slides out? -->
 <div id="sn-pan-1">
     <ul>
         <li>Stuff 1</li>
         <li>Here</li>
     </ul>
  </div>
 <div id="sn-pan-2">
     <ul>
         <li>Stuff 1</li>
         <li>Here</li>
     </ul>
  </div>
  ...
  ...
  <div id="sn-pan-7">
     <ul>
         <li>Stuff 7</li>
         <li>Here</li>
     </ul>
  </div>

CSS：

.sn a {
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #
}

div[id*="sn-pan-"]{
    float: left;
    background: red;
    width: 100px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0;
    display: none;
}

看演示