2

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

我应该能够一次又一次地做那个手术。

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

    }

​</p>

JS：

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


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

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


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

});​

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

4

3 回答 3

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

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

小提琴

于 2013-01-04T07:40:36.773 回答
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);
于 2013-01-04T07:58:10.363 回答
2

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

于 2013-01-04T07:58:33.100 回答