jQuery slideToggle 不会在实时站点上显示动画，但在 jsfiddle 上显示动画

Question

这很难显示，在jsfiddle中它可以按预期工作(https://jsfiddle.net/q4mwboen/1/)但在我的测试页面上(http://uf.framefaktur.de)它没有——没有向下滑动的动画，它只是出现了(当再次单击时，需要一段时间才能消失——没有动画(。这是完全相同的代码(较少的内容(

因此，我想显示一个带有jquery动画的菜单(slideToggle(。我在"；活的"；地点

<div id="header">
<div id="burger">
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
</div>
<div id="head" style="display: none;">
<div id="menu">
Menu
</div>
</div>

$(function() {

$(".menu-link").click(function() {
$("#burger").toggleClass("open");
$("#head").slideToggle("slow");

});

});

Answer 1

添加对event.preventDefault()的调用，作为$(".menu-link").click(..)内的第一行代码。此代码阻止调用url。在这种情况下，代码会将#添加到URL中。这将使网页登顶。

在main.js中，当前$(".menu-link").click()有一个对$("#head").toggleClass("clicked");的调用，但它可能应该是$("#head").slideToggle("slow");

此外，为了确保web浏览器不会检索到main.js的缓存版本，您应该考虑附加一个查询字符串，例如：<script src="assets/js/main.js?v=1"></script>

在main.js:中

var rellax = new Rellax('.rellax');
console.log('start loading main.js'); // TODO: remove console.log()
$(function () { // Make sure all JQuery code is loaded inside $(function ()
$(".menu-link").click(function (e) {
e.preventDefault();
console.log('click > menu-link');
$("#burger").toggleClass("open");
$("#head").slideToggle("slow"); // TODO: Currently code has $("#head").toggleClass("clicked");
});
$(window).scroll(function () {
console.log('scroll > window');
if ($(this).scrollTop() > 150){
$('#head, #header, #logo').addClass("sticky");
$('.scrollToTop').fadeIn();
}
else {
$('#head, #header, #logo').removeClass("sticky");
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function () {
console.log('click > scrollToTop')
$('html, body').animate({scrollTop : 0},800);
return false;
});
console.log('finished loading main.js');
});