ウェブページで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スキルはまだまだ弱いです。
コンソールに何かエラーがありますか? – DonovanM
全くありません。 ** menuL.onclick **がまったく起こらないかのようです。 (アラートメッセージで試した - 何も起こりません) – sveto