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

Question

本帖最后由 natsuyuu 于 2013-02-11 14:51:42 编辑

Answer 1

获取的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();   //如果你想默认是隐藏状态,可取消此行注释,下面两个切换函数换位

});

Answer 2

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