jQuery 点击DIV中相应的子元素获取另外一个DIV中相对应的子元素
<divclass="Box"><ulclass="case"><li><div><ahref="#">点击1</a></div></li><li><div><ahref...
<div class="Box">
<ul class="case">
<li>
<div><a href="#">点击1</a></div>
</li>
<li>
<div><a href="#">点击2</a></div>
</li>
<li>
<div><a href="#">点击3</a></div>
</li>
</ul>
<ul class="case_show">
<li><a href="#">显示1</a></li>
<li><a href="#">显示2</a></li>
<li><a href="#">显示3</a></li>
</ul>
</div>
我需要的效果的是 点击：默认情况下“case_show” 是隐藏的。“点击1” 的时候，“显示1” 显示，再次点击的时候“显示1隐藏”；“点击2” 的时候，“显示2” 显示，再次点击的时候“显示2隐藏；依次类推。求 jQuery写法。 展开
<ul class="case">
<li>
<div><a href="#">点击1</a></div>
</li>
<li>
<div><a href="#">点击2</a></div>
</li>
<li>
<div><a href="#">点击3</a></div>
</li>
</ul>
<ul class="case_show">
<li><a href="#">显示1</a></li>
<li><a href="#">显示2</a></li>
<li><a href="#">显示3</a></li>
</ul>
</div>
我需要的效果的是 点击：默认情况下“case_show” 是隐藏的。“点击1” 的时候，“显示1” 显示，再次点击的时候“显示1隐藏”；“点击2” 的时候，“显示2” 显示，再次点击的时候“显示2隐藏；依次类推。求 jQuery写法。 展开
1个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
jQuery(function(){
var $case_show = jQuery('.case_show').children().each(function(){ jQuery(this).hide(); }).end();
var $case = jQuery('.case').delegate('a','click',function(){
var $a = jQuery(this);
var index = $case.children().index($a.parent().parent());
var $current = $case_show.children().eq(index);
if(!$a.data('display')){
$current.show();
$a.data('display',true);
}else{
$current.hide();
$a.data('display',false);
}
});
});
</script>
</head>
<body>
<div class="Box">
<ul class="case">
<li>
<div><a href="#">点击1</a></div>
</li>
<li>
<div><a href="#">点击2</a></div>
</li>
<li>
<div><a href="#">点击3</a></div>
</li>
</ul>
<ul class="case_show">
<li><a href="#">显示1</a></li>
<li><a href="#">显示2</a></li>
<li><a href="#">显示3</a></li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
