1

我有一个带有联系面板的网站，可以在点击事件上滑动打开。这是一个 MooTools 脚本。它在除 IE7 和 IE8 之外的所有浏览器中测试正确。运行 IE8 和 IE7 模式的 IE9 中的开发人员工具包说这是因为

SCRIPT438: Object doesn't support property or method 'hasClass'

在此处查看下面的代码

$('contact-toggle').addEvent('click', function(event){
    event.stop();
     if(e.hasClass('active')) {
        closePanel();
       } else {
        openPanel(-380);
       }
});

关于如何解决这个问题的任何想法？

更新：这是整个 MooTools 脚本（根据下面的评论更新）...

window.addEvent('domready', function() {

var e = document.getElementById('info');
var contact_h = document.getElementById('contact-toggle-heading')   
var contact_i = document.getElementById('contact-toggle-icon');

function closePanel(){
      this.tween('margin-top',-50);
      this.removeClass('active');
      contact_i.setProperty('src', 'http://webiste.com.au/images/interface/arrow-up.png');
      contact_h.set('text','Contact');
      $$('.footer-header').removeClass('diminish');
}

function openPanel(panelHeight){
      e.tween('margin-top',panelHeight);
      e.addClass('active');
      contact_i.setProperty('src', 'http://website.com.au/images/interface/arrow-down.png');
      contact_h.set('text','Close');
      $$('.footer-header').addClass('diminish');
}

function timerPanel(){
    clearTimeout(timer);
    timer = (function(){ 
      closePanel();
    }).delay(5000);
}

$('contact-toggle').addEvent('click', function(event){
    event.stop();
     if(this.hasClass('active')) {
        closePanel();
       } else {
        openPanel(-380);
       }
});
}); //end script

换e了this工作 - 但问题转移到了线上e.tween('margint-top...。我试图将事件对象传递给 openPanel 函数，但还没有运气。

4

3 回答 3

3

您应该使用 $('info') 而不是 document.getElementById。在 IE LTE 8 中，MooTools 不会扩展这些元素，这会导致错误。当您使用 $ 函数时，元素被扩展，然后 document.getElementById 也将起作用。

于 2013-01-24T15:21:07.240 回答
2

是什么e？可能您应该使用this，因为在事件侦听器内部，this === $('contact-toggle').

所以使用：if (this.hasClass('active'))

于 2013-01-22T12:19:15.557 回答
1

这里有很多问题。首先，您将真正受益于跟踪您的 Event 变量。您将其定义为事件，然后更改为 e，然后完全忽略它。

从这里开始，

//don't use document.getElementById it won't support methods like tween
var info = $('info')

$('contact-toggle').addEvent('click', function(e){
     e.stop();

     if(info.hasClass('active')) {
        closePanel();
     } else {
        //if -380 is a connstant, there's no need to pass it like this, define it in your function
        openPanel();
     }
});

现在让我们处理这些

function closePanel(){
      info.tween('margin-top',-50);
      info.removeClass('active');
      contact_i.setProperty('src', 'http://webiste.com.au/images/interface/arrow-up.png');
      contact_h.set('text','Contact');
      $$('.footer-header').removeClass('diminish');
}

function openPanel(){
      var panelHeight = -380; //this should be probably be a computed property

      info.tween('margin-top',panelHeight);
      info.addClass('active');
      contact_i.setProperty('src', 'http://website.com.au/images/interface/arrow-down.png');
      contact_h.set('text','Close');
      $$('.footer-header').addClass('diminish');
}

那应该让你开始。也考虑使用 Mootools 类，它们很棒，真的让事情变得更容易。

于 2013-01-24T21:35:30.373 回答