编辑:我注意到如果我在本地运行我的项目(使用Brackets实时预览),问题就不存在了。只有在我将网站部署到getforge.io时才会出现此问题。
我有一个使用HTML / CSS / Bootstrap / JS的多页网站。每当我导航到另一个页面时,导航栏上的下拉菜单都不起作用(我可以打开导航栏,但“关于”下拉列表不起作用,除非我刷新页面)。我在另一个页面上也有滑动面板有相同的问题,只有在页面加载后刷新才有效。我尝试将数据-ajax =“false”添加到我的主播,但这不起作用。这是一些代码:
<!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>
答案 0 :(得分:1)
我通过在getforge.io的设置中禁用TurboJS来修复此问题。
答案 1 :(得分:0)
删除身体外的所有脚本
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="resources/css/font-awesome/css/font-awesome.min.css">
<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>
</body>
<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>
<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>