javascript - 使用 jQuery 打开关闭按钮

Question

所以我有一个图标，它本质上是一个打开关闭按钮。

因此，当您打开它时，它会变成红色并旋转 45 度。现在问题来了。因为它打开了，我无法关闭它。因为如果我更改 div 类，图标将不会在其处于事件状态时显示。这是我正在使用的 jQuery

$(".fa-plus").click(function() {
  $(".form").removeAttr("style");
  $('.fa-plus').css('-webkit-transform', 'rotate(45deg)');
  $('.fa-plus').css('-webkit-transition', '0.25s');
  $('.fa-plus').css('color', '#FF0000');
  $(".fa-plus").attr("id", "test");
});

这基本上是打开它，并添加一个名为 test 的 #id。当我单击名为 #test 的图标时会发生什么。它不会显示带有此代码的警报，它只会在我按 + 而不是 X

时显示警报

$("#test").click(function() {
  alert('test');
});

Here's一个演示。我只需要在您点击红色 X

时收到警报

Answer 1

你可以像这样简单地做: http://jsfiddle.net/M5N9V/2/

$(".fa-plus").click(function () {

    var io = this.io ^= 1;

    $(this).css({
        transform: "rotate("+ (io?45:0) +"deg)",
        color: io?"#f00":"#69f",
        transition:"0.25s"
    });

    if(io){
       // OPEN DROPDOWN LOGIC HERE
    }else{
       // CLOSE DROPDOWN LOGIC HERE
    }

});

甚至喜欢: http://jsfiddle.net/M5N9V/3/

$(".fa-plus").click(function () {
    $(this).toggleClass("fa-red");
});

通过像这样修改你的 CSS:

.fa-plus {
    cursor: pointer;
    font-size: 24px;
    color: #69f;
    transition: 0.25s;
}
.fa-red{
    color: #f00;
    transform : rotate(45deg);
}