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

2013-02-25

想用jq实现标签的展开效果，没有办法做到单个标签单独展开本帖最后由 natsuyuu 于 2013-02-11 14:51:42 编

想用jq实现标签的展开效果，没有办法做到单个标签单独展开
本帖最后由 natsuyuu 于 2013-02-11 14:51:42 编辑
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 于 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>

热点排行

JavaScript

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