2017-06-18 15 views
0

ウェブページで2種類のスクリプトを使用します.1つは純粋なJS、もう1つはjQueryです。矛盾するスクリプトは何ですか?

JSスクリプトは、モバイルビューでハンバーガーメニューを切り替えるために使用されます。 hamb.onclickはハンバーガーをクリックするとメニューを表示し、menuL.onclickはメニュー項目をクリックするとメニューを非表示にします。後者は、jQueryスクリプトがアクティブなときに動作することを拒否します(jQueryスクリプトがコメントアウトされているときに機能します)。彼らが働くので、私はそれを理解したよう

<script> 
    function scrollNav() { 
     $('.menu a').click(function(){ 
      //Toggle Class 
      $(".active").removeClass("active"); 
      $(this).closest('li').addClass("active"); 
      var theClass = $(this).attr("class"); 
      $('.'+theClass).parent('li').addClass('active'); 
      //Animate 
      $('html, body').stop().animate({ 
      scrollTop: $($(this).attr('href')).offset().top - 160 
      }, 800); 
      return false; 
      }); 
     $('.scrollTop a').scrollTop(); 
    } 
    scrollNav(); 
</script> 

は、jQueryのスクリプトは、JSスクリプトのonclickイベントをhighjacks:

<script> 
(function() { 

    function hasClass(elem, className) { 
     return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); 
    } 

    function toggleClass(elem, className) { 
     var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' '; 
     if (hasClass(elem, className)) { 
      while (newClass.indexOf(' ' + className + ' ') >= 0) { 
       newClass = newClass.replace(' ' + className + ' ', ' '); 
      } 
      elem.className = newClass.replace(/^\s+|\s+$/g, ''); 
     } else { 
      elem.className += ' ' + className; 
     } 
    } 

    var hamb = document.querySelector('.hamburger'); 
    var menuL = document.querySelector('.menuList'); 

    hamb.onclick = function() { 
     toggleClass(this, 'hamburgerOpen'); 
     toggleClass(menuL, 'menuActive'); 
    }; 

    menuL.onclick = function() { 
     toggleClass(hamb, 'hamburgerOpen'); 
     toggleClass(menuL, 'menuActive'); 
    }; 
})(); 
</script> 

のjQueryは、ページのアンカーへスクロール/スムーズなナビゲーションのために使用されています同じ親要素に: ".menu a"と "menuList"(これは ".menu"の中の "ul"です)。

両方のスクリプトを連携させるにはどうすればよいですか?私は初心者で、JavaScriptスキルはまだまだ弱いです。

+0

コンソールに何かエラーがありますか? – DonovanM

+0

全くありません。 ** menuL.onclick **がまったく起こらないかのようです。 (アラートメッセージで試した - 何も起こりません) – sveto

答えて

0

ああ、私が本当に助けを必要とするので、私はここに投稿する時間の90%、来てください - 私は助けを得ることはありません。数字...

答えは簡単です(しかし、私は一晩中他のスクリプトを試しています)。 2番目のスクリプトがイベントをハイジャックする場合は、2番目のスクリプトに関数を移動して実行してください。