jQuery中的eq(0)到底是什么意思??详情请看下面代码！
本文介绍了jQuery中的eq(0)到底是什么意思??详情请看下面代码！的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>手风琴效果</title>
<meta name="keywords" content="" />
<meta name="description" content="" /><script src="http://libs.baidu.com/jquery/...
<style type="text/css">
*{padding:0; margin:0;}
.box{margin:50px auto; width:300px; height: auto; border: solid 1px #cccccc;}
.Collapsing{ width: 100%; height: 30px; line-height: 30px; cursor: pointer; border-bottom: 1px solid white; text-align: center; background-repeat: no-repeat; background-position: center right no-repeat; background-image: url(images/pro_left.png); background-color: #BDBDBD; color: #fff; }
.coll_body{display: none; }
.coll_body a{display:block; margin:10px; text-align: center; background: #ebebeb;}
.current{background-image:url(images/pro_down.png);}
</style></head>
<body>
<div class="box">
<h3 class="Collapsing current">星期一</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
<h3 class="Collapsing">星期二</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
<h3 class="Collapsing">星期三</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
<h3 class="Collapsing">星期四</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div>
<h3 class="Collapsing">星期五</h3>
<div class="coll_body">
<a href="#">语文</a>
<a href="#">数学</a>
<a href="#">英语</a>
<a href="#">科学</a>
</div></div>
<script type="text/javascript">
$(function(){
$(".coll_body").eq(0).show();//这句话是什么意思呢？？
// $(".coll_body").eq(0)：不是只匹配页面上第一个coll_body吗?为什么其他的 coll_body也会相应生效？？？？求解
$(".Collapsing").click(function(){
$(this).toggleClass("current").siblings('.Collapsing').removeClass("current");//切换图标
$(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
});});
</script>
</body>
</html>
解决方案
将第一个.coll_body 的元素内容进行展示 ，这个只在页面第一次加载时出现
这篇关于jQuery中的eq(0)到底是什么意思??详情请看下面代码！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
