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

您要附上两个点击事件。分开它。尝试以下代码

 $(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');
            });
        });

Answer 3

我建议你改用 Css 。

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

希望得到这个帮助。

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

3 个答案: