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

document.getElementById の代わりに $('info') を使用する必要があります。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 変数を追跡することで大きなメリットが得られます。これを 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 Classes の使用も検討してください。これらは優れており、物事をより簡単にします。

于 2013-01-24T21:35:30.373 に答える