Question

我有一个侧面导航，我希望导航中的每个列表项都可以点击，这将启动该部分的其他选项的切换。

到目前为止，我有一个粗略的代码，试图展示我正在谈论的内容。红色列将是由第一列上的每个链接触发的切换部分。然而，我的主要问题是有效实现这一目标的最佳方法。显然有7个链接，这意味着我需要7个切换。

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

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

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

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)
});

Side Nav 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;
}

Jquery sidenav切换

2 个答案:

SEE DEMO