使用 jQuery 打开关闭按钮答案

【问题标题】：Open close button with jQuery使用 jQuery 打开关闭按钮
【发布时间】：2014-07-08 08:36:40
【问题描述】：

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

所以当你打开它时，它会变成红色并旋转45degrees。现在问题来了。由于它打开，我无法关闭它。因为如果我更改 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 演示。我只希望在您点击 red X

时发出警报

【问题讨论】：

对我来说似乎工作正常。它会双向提醒。
与@Yaje 的结果相同，因为它对我来说是双向的。
我只想在你按下红色X@Yaje 时发出警报
@islanddave ^^。对不起，如果我不够清楚

标签： javascript html css

【解决方案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);
}

【讨论】：

@jasonscript 这是我想出如何将布尔 (IO) 状态直接存储到目标元素的 this 对象引用中的一种方法。 ^= 1 是用于切换它的按位异或运算符 (1,0,1,0,1...) stackoverflow.com/questions/654057/… 我还为您创建了一个简单的示例：jsbin.com/sugib/1/edit
哦，我明白了。 var io 不是真的需要，是吗？由于您正在使用 this 创建一个全局变量（指的是 window 对象）
@jasonscript 不，它比您想象的要好。在 jQ 选择器的事件（如“点击”）回调函数中，即：$('.element').click(function(){ this == ??? });，this 始终指的是 HTMLElement obcjet。所以实际上我们滥用this 对象分配一个名为io 的新属性来存储我们的“I/O”(1||0) 值。很酷，对吧？ ;) 与通常使用data-* 属性相同，但我发现这种方式更简单。

【解决方案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;

}

【讨论】：