Jquery sidenav切换
提问于 2012-09-05 11:02:04
我有一个侧边导航，我希望导航中的每个列表项都是可点击的，这会启动该部分的进一步选项切换。
到目前为止，我有一些粗略的代码来尝试演示我正在谈论的内容。红色列将是由第一列上的每个链接触发的切换部分。然而，我的主要问题是有效实现这一目标的最佳方法。显然有7个链接，这意味着我需要7个切换。
JS fiddle：http://jsfiddle.net/visualdecree/Be6ry/31/ *编辑-我要求7个链接都有一个单独的div，可以切换到不同的选项。
我会有7个隐藏的div，由7个不同的触发器切换吗？
这方面的任何帮助都将不胜感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-09-05 11:37:18
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;
}Stack Overflow用户
发布于 2012-09-05 11:26:30
请查看这个更新的小提琴，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个不同的处理程序:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12279996
复制相关文章
点击加载更多
腾讯云开发者
