jquery - 为什么我的点击处理程序在 2 次点击后失败？

Question

我的目标是在两个图像之间上下切换。

这就是我所拥有的，它部分工作。

如果这没问题，那么我错过了什么？
当我点击两次它停止工作....

这是我的代码：

   $(document).ready(function () {
       $(".collapse").click(function () {
           $("#box").hide();
           $(".collapse").replaceWith('<span class="open"></span>');
           $(".open").click(function () {
               $("#box").show();
               $(".open").replaceWith('<span class="collapse"></span>');
           });
       });
   });

Answer 1

好的......而不是你replaceWith只是这样做：

$(".open").removeClass("open").addClass("collapse");
//and
$(".collapse").removeClass("collapse").addClass("open");

并将其更改.click为（使用on(...)）：

$(document).on("click", ".collapse", function () {
    ....
});

---

把所有这些放在一起：

$(document).ready(function () {
   $(document).on("click", ".collapse, .open", function () {
       $("#box").toggle();
       $(this).toggleClass("open", "collapse"); //toggles btw the two classes
   });
});

Answer 2

May I suggest you to use Css instead.

jQuery:

$(".collapse").toggleClass('closed')

Css:

.collapse { 
    background: url(image/arrow-up.jpg); 
}
.collapse.closed {
    background: url(image/arrow-down.jpg); 
}
.collapse > #box {
    display: block;
}
.collapse.closed > #box {
    display: none;
}

Hope this help.

Answer 3

你正在附上两个点击事件。把它分开。试试下面的代码

 $(document).ready(function() {
            $(".collapse").click(function() {
                $("#box").hide();
                $(this).removeClass('collapse');
                        $(this).addClass('open');
            });
            $(".open").click(function() {
                $("#box").show();
                $(this).removeClass('open');
                        $(this).addClass('collapse');
            });
        });