求一个循环点击展开关闭的JS
我是要点开一个地方展开一个DIV，再点一个地方关闭这个DIV同时展开之前的DIV，是一列下来的同样动作。谁能帮我把我写的代码简化一下，跪求$(function(){$('...
我是要点开一个地方展开一个DIV，再点一个地方关闭这个DIV同时展开之前的DIV，是一列下来的同样动作。谁能帮我把我写的代码简化一下，跪求
$(function(){
$('.l1').click(function(){
$('.r1>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l2').click(function () {
$('.r2>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l3').click(function () {
$('.r3>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l4').click(function () {
$('.r4>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l5').click(function () {
$('.r5>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l6').click(function () {
$('.r6>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l7').click(function () {
$('.r7>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l8').click(function () {
$('.r8>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l9').click(function () {
$('.r9>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l10').click(function () {
$('.r10>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
}) 展开
$(function(){
$('.l1').click(function(){
$('.r1>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l2').click(function () {
$('.r2>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l3').click(function () {
$('.r3>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l4').click(function () {
$('.r4>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l5').click(function () {
$('.r5>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l6').click(function () {
$('.r6>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l7').click(function () {
$('.r7>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l8').click(function () {
$('.r8>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l9').click(function () {
$('.r9>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
$('.l10').click(function () {
$('.r10>div:eq(' + $(this).index() + ')').show().siblings().hide();
})
}) 展开
展开全部
不知道是不是你要的效果：
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://api.jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"></script>
<style type="text/css">
.hide { display: none; }
</style>
<script type="text/javascript">
$(function(){
$('#list-demo').on('click', '.title', function(e){
e.preventDefault();
if ($(this).next().is(':hidden'))
{
$(e.delegateTarget).find('.hide:visible').hide();
$(this).next().show();
}else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<ul id="list-demo" class="list-demo">
<li>
<a href="#" class="title">title1</a>
<div class="hide">content1</div>
</li>
<li>
<a href="#" class="title">title2</a>
<div class="hide">content2</div>
</li>
<li>
<a href="#" class="title">title3</a>
<div class="hide">content3</div>
</li>
<li>
<a href="#" class="title">title4</a>
<div class="hide">content4</div>
</li>
</ul>
</body>
</html>
更多追问追答
追问
我用的不是li,
是两个div,就是默认展示DIV1.隐藏DIV2，
点击DIV1里的一个A元素，展示DIV2，隐藏DIV1
点击DIV2里的一个A元素，展示DIV1，隐藏DIV2
追答
你把html也贴出来吧
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
//用class的话，可以统一下名称，假设父元素class=li 子元素class=r;
//把子元素全部隐藏
$("r").hide();
$("li").click(function(){
if($(this).next().is(:hidden)){
$("li").next().slideUp();
$(this).next().slideDown();
}
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
假如 .l1、.l2、.l3...l10是li的话：
$("ul>li").each(function(index){
$('.r'+(index+1)+'>div:eq('+index+')').show().siblings().hide();
});
$("ul>li").each(function(index){
$('.r'+(index+1)+'>div:eq('+index+')').show().siblings().hide();
});
更多追问追答
追问
l1、.l2、.l3...l10不是li 哦，是DIV 的class名称
追答
这些div的父级元素的id或class名称是什么？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
