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");

});

这是小提琴!!这是我想要的，但不允许第二次点击！ http://jsfiddle.net/RaExx/1/

Answer 1

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

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

Fiddle

Answer 2

问题是你试图重新绑定圈子上的点击并不能告诉你绑定什么功能。你只是说“绑定一个点击事件”，而不是说要执行什么功能。你可以做的是首先声明圆点击事件处理程序，然后你可以多次绑定它。

//Declare the event handler to use
var circleClick = function() {
  $(".close").fadeIn();
  $(".circle").unbind("click");
};

//Initital binding to circle click
$(".circle").click(circleClick);

//Bind close click
$(".close").click(function() {
  $(".close").fadeOut();
  //Re-binding to circle click
  $(".circle").click(circleClick);
});

注意：使用bind方法绑定事件需要2个参数：事件名称和事件处理程序。

代替：

$(".circle").click(circleClick);

您可以使用：

$(".circle").bind("click", circleClick);

Answer 3

在jQuery中，.bind（）事件很麻烦。建议使用.on（）事件。

http://api.jquery.com/bind/

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。

尝试这样

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

$(".close").on("click", function(event) {
  event.stopPropagation();
  $(".close").fadeOut();
});

http://jsfiddle.net/RaExx/4/

绑定和取消绑定切换

3 个答案: