编辑:我注意到如果我在本地运行我的元素(使用 Brackets 实时预览)，问题就不存在了。只有当我将网站部署到 getforge.io 时才会出现此问题。
我有一个使用 HTML/CSS/Bootstrap/JS 的多页网站。每当我导航到另一个页面时，导航栏上的下拉菜单不起作用(我可以打开导航栏，但“关于”下拉菜单不起作用，除非我刷新页面)。我在另一个具有相同问题的页面上也有滑动面板，仅当我在页面加载后刷新时才有效。我尝试将 data-ajax="false"添加到我的 anchor ，但这没有用。这是一些代码:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="resources/css/font-awesome/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?
family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>Level Red Boxing</title>
</head>
<body>
<header class="landingHeader">
<nav>
<div id="top" class="row">
<a href="index.html"><img src="resources/css/img/brand2.png"
class="logo"></a>
<ul class="main-nav js--main-nav">
<li><a id="workout" href="theworkout.html">The Workout</a>
</li>
<li><a href="motivators.html">Trainers</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-
toggle="dropdown" href="#">About<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="thelevels.html">The Levels</a></li>
<li><a href="sixpunches.html">Learn the Moves</a>
</li>
<li><a href="philosophy.html">Philosophy</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="press.html">Press</a></li>
<li><a href="privateevents.html">Private Events</a>
</li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
<li><a href="buyclasses.html">Buy Classes</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="index.html" class="accountButton">My
Account</a></li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-
round"></i></a>
</div>
</nav>
</header>
<script src="//cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.jsdelivr.net/selectivizr/1.0.3b/selectivizr.min.js">
</script>
<script src="resources/js/script.js"></script>
</body>
这里是滑动面板的函数:
<script>
$(document).ready(function () {
$(".flip").click(function () {
$('.panel').not($(this).next(".panel").slideToggle("slow")).slideUp("slow");
});
});
</script>
最佳答案
我通过在 getforge.io 的设置中禁用 TurboJS 解决了这个问题。
关于javascript - 为什么我网站上的 JavaScript 只有在我刷新页面后才能工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44287936/