Question

我有一个脚本可以在点击按钮时切换菜单。当我在HTML中的脚本标记内添加相关的jq代码时，它工作正常。但是当我将它添加到外部文件时，它不起作用。

我的HTML页面是：

<body ng-app="myApp">
    <div ng-controller="MainController">
        <div ng-view></div>
    </div>
    <script src="scripts/lib/jquery-2.1.4.js"></script>
    <script src="scripts/lib/jquery-ui.js"></script>
    <script src="scripts/lib/angular.js"></script>
    <script src="scripts/lib/angular-route.js"></script>
    <script src="scripts/lib/angular-resource.js"></script>
    <script src="scripts/lib/app-helper.js"></script>

    <script src="scripts/app/app.js"></script>
    <script src="scripts/app/controllers/main-controller.js"></script>
    <script src="scripts/app/directives/menu-ribbon-directive.js"></script>
</body>

app-helper.js 是我的外部JS文件。

在我的JS文件中，我有：

$(document).ready(function () {
    $("#wrapper").toggleClass("toggled");

    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
});

调用HTML代码：

<div id="wrapper">
    <menu-ribbon></menu-ribbon>
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-2">
                    <a href="#menu-toggle" class="btn btn-default command-maps_hamburger-button" id="menu-toggle">
                        <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

像这样添加上述脚本非常有效：

<script>
    $("#wrapper").toggleClass("toggled");

    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    }); 
</script>

如果我将Jquery脚本添加到新的js文件中，则它不起作用

0 个答案: