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

这基本上打开了它，广告#id名为test。当我点击名为#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);
}

Answer 2

Here's给你一个小提琴......

最好的方法是使用CSS类，并使用jQuery的toggleClass方法在每次按下时添加/删除它。然后，您可以检查该类是否已应用并随后采取相应措施：

的JavaScript / jQuery的：

$(".fa-plus").click(function() {
    $(this).toggleClass('fa-close');

    if(!$(this).hasClass('fa-close'))
        alert('closing!');
});

CSS：

.fa-plus {

    cursor: pointer;
    font-size: 24px;
    color: #6699FF;

    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;

}

.fa-close{

    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);

    color:#FF0000;

}

用jQuery打开关闭按钮

2 个答案: