为什么我刷新页面后,我网站上的JavaScript才有效?

时间:2017-05-31 14:48:37

标签: javascript jquery html css twitter-bootstrap

编辑:我注意到如果我在本地运行我的项目(使用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>

2 个答案:

答案 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>