想用jq实现标签的展开效果，没有办法做到单个标签单独展开

[natsuyuu]

jquary代码如下：

$(function(){
	var $title=$('div.jqdemo');//找到要显示/隐藏的元素
	//$title.hide();   //如果你想默认是隐藏状态,可取消此行注释,下面两个切换函数换位
	$title.prev().toggle(function(){//为显示/隐藏元素的前一个元素(取出标题元素)设置点击切换事件
		$title.hide().prev().find('span').text('+');//第一次点击时,隐藏div元素,并找到标题元素中的span,切换按钮
	},function(){
		$title.show().prev().find('span').text('-');//第二次点击时,显示div元素,并找到标题元素中的span,切换按钮
	});
	

html部分：

 <p>
        <h2><span>-</span>Profile</h2>
        <div class="jqdemo">
        	<p>test1</p>
            <p>test1</p>
            <p>test1</p>
        </div>
        <h2><span>-</span>Education</h2>
        <div class="jqdemo">
        	<p>test1</p>
            <p>test1</p>
            <p>test1</p>
        </div>
        <h2><span>-</span>Competence</h2>
        <div class="jqdemo">
        	<p>test1</p>
            <p>test1</p>
            <p>test1</p>
        </div>
        <h2><span>-</span>Source Code</h2>
        <div class="jqdemo">
        	<p>test1</p>
            <p>test1</p>
            <p>test1</p>
        </div>
</p>

现在问题是，点任何一个标签都对把所有的内容展开
而且有的时候需要点击两次才能展开，不知道哪里逻辑出了问题
如何修改jquary让点击每个标签时，只展开点击的那个标签，收回其他的？ 谢谢!

[爱若如梦]

引用 楼主 natsuyuu 的回复:

本帖最后由 natsuyuu 于 2013-02-11 14:51:42 编辑 jquary代码如下： Java code?123456789$(function(){ var $title=$('div.jqdemo');//找到要显示/隐藏的元素 //$title.hide(); //如果你想默认是隐藏状态,可取消此行注释,下面两个切换……

获取的title是个数组，遍历title每个元素即可，如下

$(function(){
	var $title=$('div.jqdemo');//找到要显示/隐藏的元素
	$title.each(   //遍历
		function()
		{			
			var $titleDiv = $(this);
			$titleDiv.prev().toggle(function(){//为显示/隐藏元素的前一个元素(取出标题元素)设置点击切换事件
				$titleDiv.hide().prev().find('span').text('+');//第一次点击时,隐藏div元素,并找到标题元素中的span,切换按钮
			},function(){
				$titleDiv.show().prev().find('span').text('-');//第二次点击时,显示div元素,并找到标题元素中的span,切换按钮
			});
		}	
	);
	//$title.hide();   //如果你想默认是隐藏状态,可取消此行注释,下面两个切换函数换位
	
});

[魔术世界中文版]

<style type="text/css">
p{
margin-left:10px;
line-height:0px;
}
</style>	
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$(function(){
		var i=0;
		$("p").hide();
		$("span").text("+");
		$("div div").click(function(){
			i++;
			if(i%2==0){	
				$(this).find('span').text("+");
				$(this).nextAll().addClass(".cc").slideUp();
			}else{
				$(this).find('span').text("-");
				$(this).nextAll().slideDown();
			}
		});
	})
</script>	

	<div id="div1">
        <div id="X1"><span></span>qwer是X1中的内容</div>
        	<p>test1</p>
            <p>test1</p>
            <p>test1</p>
	</div>
	<div id="div2">
         <div id="X2"><span></span>asdf是X2中的内容</div>
        	<p>test2</p>
            <p>test2</p>
            <p>test2</p>
	</div>
	<div id="div3">
        <div id="X3"><span></span>zxcv是X3中的内容</div>
        	<p>test3</p>
            <p>test3</p>
            <p>test3</p>
	</div>
	<div id="div4">
         <div id="X4"><span></span>mnbv是X4中的内容</div>
        	<p>test4</p>
            <p>test4</p>
            <p>test4</p>
	</div>