javascript - 绑定(bind)和解除绑定(bind)切换

Question

我有一个圆圈，点击它应该在顶部显示一个关闭按钮。当单击该关闭按钮时，它应该隐藏并只显示圆圈。

我应该能够一次又一次地进行该操作。

<div class="circle"><div class="close"></div></div>​

CSS:

.circle
    {
        background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Blue_circle_logo.svg/100px-Blue_circle_logo.svg.png");
        height: 100px;
        width:100px;        
    }
.circle .close
    {   display:none;
        position:relative;
        background: url("http://www.dlf-data.org.uk/images/icons/close-icon.png");
        height: 30px;
        width:30px;   
        float: right;

    } 

JS:

$(".circle").click(function() {


$(".close").fadeIn();
$(".circle").unbind("click");
});

$(".close").click(function() {


$(".close").fadeOut();
$(".circle").bind("click");

});​

这是 fiddle !哪个做我想要的但不允许第二次点击! http://jsfiddle.net/RaExx/1/

Answer 1

$(".circle").click(function() {
    $(".close").fadeIn();
});

$(".close").click(function(e) {
    e.stopPropagation();
    $(".close").fadeOut();
});​

Fiddle