Question

我有一个带有联系人面板的网站，可以在点击活动中滑开。这是一个MooTools脚本。它在除IE7和IE8之外的所有浏览器中都经过正确测试。运行IE8和IE7模式的IE9中的Developer Toolkit说是因为

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

请参阅以下操作here

中的代码

$('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函数，但还没有运气。

Answer 1

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

Answer 2

什么是e？可能你应该使用this，因为在事件监听器中this === $('contact-toggle')。

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

Answer 3

这里有很多问题。首先，您将真正受益于跟踪您的事件变量。您将其定义为事件，然后更改为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 Classes，它们很棒，真的让事情变得更容易。

Mootools在IE7和IE8中有类问题

3 个答案: