Question

我正在尝试编写一个函数，让我根据类别切换列表中的所有缩略图。例如，如果我点击菜单栏上的“打印”，我需要隐藏“打印”类的所有拇指。如果我再次点击它，隐藏的拇指就会显示出来。

以下是我提出的建议：

window.addEvent('domready', function(){
       $$('.menu_button').toggle(
        function() {
            this.fade(0.5);
            var buttonId = this.id;
            $('slider_list').getElements('.'+buttonId).each(function(li) {
                li.tween('width','0');
            });
        },
        function() {
            this.fade(1);
            var buttonId = this.id;
            $('slider_list').getElements('.'+buttonId).each(function(li) {
                li.tween('width','100');
            });
        }
    );  

});



//toggle (emulate JQuery's toggle)
(function() {
    var toggled = 0;
    Element.implement({
        toggle: function(fn1, fn2) {
            var fns = [fn1, fn2];
            return this.addEvent('click', function(){
                fns[toggled].apply(this, arguments);
                toggled = toggled == 0 ? 1 : 0;
            });
        }
    });
})();

我找到了切换功能here

现在我遇到了一些问题。首先，无论我做什么，总会有一个拇指留在列表的末尾。然后菜单上的一些点击将不会做任何事情。通常，当我点击处于与前一个状态不同的状态（隐藏/显示）的按钮时，总会有一个空单击...

有人吗？

Answer 1

我以允许多个功能的方式实现它，尽管根本不是MooTools，它会起作用。您使用的代码的问题是，使用切换的每个元素都切换相同的toggled变量

Element.implement({
    toggle: function() {
       this.store('toggle_options', {
         fn: arguments,
         cur: 0
       });
       this.addEvent('click', function(e) {
           e.stop();
           var opts = this.retrieve('toggle_options');
           console.log(opts.fn.length, opts.cur);
           opts.fn[opts.cur++].apply(this);
           if(opts.cur >= opts.fn.length) opts.cur = 0;
       }); 
    } 
});

$('button').toggle(
    function() {
      this.set('text', 'foo 1');  
    },
    function() {
      this.set('text', 'bar 2');
    }
);

在这里摆弄：http://jsfiddle.net/94FFj/

虽然我建议你实现你的代码：

  $$('.menu_button').each(function(button) {
    button.store('toggle_active', 0);
    button.addEvent('click', function(e) {
      e.stop();
      var active = this.retrieve('toggle_active');
      var opts = [{opacity: 1, width: 0}, {opacity: 0.5, width: 100}];
      this.fade(opts[active].opacity);
      $$('slider_list .' + this.get('id')).tween('width', opts[active].width);
      this.store('toggle_active', active ? 0 : 1);
    });
  })

mootools切换按钮问题

1 个答案: