用JQ怎么第一次点击添加节点，第二次点击隐藏刚刚添加的节点

Question

页面刚加载显示的

点击加号会添加节点

我现在做的就是点加号就一直是添加节点了。。我想点一次添加，点第二次隐藏掉。后面就是隐藏显示之间切换。。

求个大神帮帮忙吧。。

Answer 1

假设+号按钮类为show，-号按钮类为hide，要被添加的元素div类为.append_div
数据结构为

<div class="cityList">
    <div class="listItem">
        <a href="" class="show">+</a>
        减号为
        <a href="" class="hide">-</a>
        <div class="append_div">
        
        </div>
    </div>
</div>

被添加的数据为

var appendHtml = '<ul>' + 
                    '<li><a href="">...</a></li>' + 
                 '</ul>';

js实现

//显示数据
$('.show').click(function(){
    //加载数据
    $(this).parent().find('.append_div').append(appendHtml);
    //隐藏自身，同时显示-号
    $(this).hide();
    $(this).parent().find('.hide').show();
});

//隐藏数据
$('.hide').click(function(){
    //移除添加的元素
    $(this).parent().remove('.append_div');
    //或者只隐藏
    //$(this).parent().find('.append_div').hide();
    //隐藏自身，同时显示+号
    $(this).hide();
    $(this).parent().find('.show').show();
});

如果想点击显示和隐藏有缓慢效果，可以这么做

//在1秒内完成显示操作
$(this).parent().find('.show').show(1000);

Answer 2

先判断你要加的东西是否已经存在了就好。

如果不存在，添加
如果已存在，切换显隐状态 (toggle)

Answer 3

如果是添加删除，就判断有没有就可以了。如果是只是切换显示隐藏，就判断当前状态就好了。
jquery1.9之前：$('#example').click(function(){$("#example2").toggle();})
jquery1.9之后：
$('#example').click(function(){

if($("#example2").is(":hidden")){
    $("#example2").show();
    
}else{
    $("#example2").hide();
    
}

})

另外也可以通过toggleClass切换类，用类的css来实现

Answer 4

点击时判断下有没有，有就隐藏，没有就插入

Answer 5

toggle方法，你查一下JQ文档学习下就会了

Answer 6

一种方法是判断有没有这个节点有就删除，没有就添加。
二种方法可以添加一个标识变量add=true
var add=true
click处理函数{
if(add){

//添加节点
add=false;

}else{

//删除节点
add=true

}
}