求助: JS伸缩修改,改为所有都可以收缩在一起(现在是显示一个)

JavaScript07

求助: JS伸缩修改,改为所有都可以收缩在一起(现在是显示一个),第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>title</title>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#vtitle").click(function(){

$(".vcon").hide("slow")

})

})

</script>

<style type="text/css">

*{margin:0padding:0list-style-type:none}

a,img{border:0}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体"}

a,a:hover{text-decoration: none}

/*收缩菜单*/

.v{float:rightwidth:14pxheight:14pxoverflow:hiddenbackground:url(images/vicon.png) no-repeatdisplay:inline-blockmargin-top:-5pxmargin-bottom:-5px}

.v01{background-position:0 0}

.v02{background-position:0 -16px}

.vtitle{height:35pxbackground:#fbede0line-height:35pxborder:1px solid #ccb6a9margin-top:-1pxpadding-left:20pxfont-size:15pxcolor:#4d4d4dfont-family:"\5FAE\8F6F\96C5\9ED1"cursor:pointer}

.vtitle em{margin:10px 10px 0 0}

.vconlist{background:#9cc}

.vconlist li a{height:30pxline-height:30pxpadding-left:30pxdisplay:blockfont-size:14pxcolor:#866f67font-family:"\5FAE\8F6F\96C5\9ED1"}

.vconlist li.select a,.vconlist li a:hover{color:#ed4948text-decoration:none}

</style>

</head>

<body>

<div style="width:268pxmargin:30px auto 0 auto">

<div class="vtitle" id="vtitle"><em class="v v02"></em>测试1</div>

<div class="vcon">

<ul class="vconlist clearfix">

<li class="select"><a href="javascript:">测试1</a></li>

<li><a href="javascript:">测试1</a></li>

<li><a href="javascript:">测试1</a></li>

</ul>

</div>

<div class="vtitle"><em class="v"></em>测试2</div>

<div class="vcon" style="display: none">

<ul class="vconlist clearfix">

<li><a href="javascript:">测试2</a></li>

<li><a href="javascript:">测试2</a></li>

<li><a href="javascript:">测试2</a></li>

</ul>

</div>

<div class="vtitle"><em class="v"></em>测试3</div>

<div class="vcon" style="display: none">

<ul class="vconlist clearfix">

<li><a href="javascript:">测试3</a></li>

<li><a href="javascript:">测试3</a></li>

<li><a href="javascript:">测试3</a></li>

</ul>

</div>

</div>

</body>

</html>是这样的不?(jquery包地址变一下)

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow")

})