Question

我想在我的网站上创建按钮，当他们第一次点击时使用动画显示窗口，并在第二次点击时使用另一个动画隐藏该窗口：

var aActivated = false;
var bActivated = false;
var cActivated = false;
....

$('#aButton').click(function() {
  if (aActivated)
    $('#myWindowA').animate( // ANIMATION THAT SHOWS WINDOW BY SLIDING TO THE LEFT // );
  else 
    $('#myWindowA').animate( // ANIMATION THAT HIDES WINDOW BY SLIDING TO THE RIGHT // );
  aActivated = !aActivated;
});

$('#bButton').click(function() { ........

我的解决方案有效但它意味着为页面上的每个按钮声明一个布尔值，并且必须为每次点击编写if/else语句。有很多按钮会变得很乱......

这没什么不好但是我无法帮助我认为必须有一个更聪明的方法来做到这一点。当然，如果我只是使用slideToggle()，那么代码会更少，但我的动画会更加时髦。

Answer 1

您可以使用jQuery＆＃39; s data()代替全局变量，使事件处理程序更容易附加到多个元素：

$('.many_buttons').on('click', function() {
    var flag = $(this).data('flag');

    if (flag) {
        $('#myWindowA').animate( ... );
    } else {
        $('#myWindowA').animate( ... );
    }

    $(this).data('flag', !flag);
});

FIDDLE

最智能的处理方式＆＃34;首先点击 - 显示;第二次点击隐藏＆＃34;

1 个答案: