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

natsuyuu 2013-02-11 02:45:02

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让点击每个标签时,只展开点击的那个标签,收回其他的? 谢谢!
...全文
533 2 点赞 打赏 收藏 举报
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复

<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>

  • 打赏
  • 举报
回复
爱若如梦 2013-02-11
引用 楼主 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();   //如果你想默认是隐藏状态,可取消此行注释,下面两个切换函数换位
	
});
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2013-02-11 02:45
社区公告
暂无公告