Question

我正在使用html网站模板来构建有角度的项目，但是自定义js脚本存在问题。菜单按钮（用于切换导航）和custom.js中的其他一些东西不起作用

我尝试在index.html中链接脚本文件链接，并在angular.json配置文件中引用了它

这是指向文件https://github.com/donprecious/crtx的github链接

这是index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>CREXT | DRD</title>
<!--
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
    <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">

    <link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
    <link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

    <link href="../build/css/custom.min.css" rel="stylesheet">

  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
       <app-root></app-root>
    </div>

    <!-- jQuery -->
    <!-- <script src="assets/vendors/"></script> -->
    <script src="assets/vendors/jquery/dist/jquery.min.js"></script>
    <script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="assets/vendors/fastclick/lib/fastclick.js"></script>
    <script src="assets/vendors/nprogress/nprogress.js"></script>
    <script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
    <script src="assets/vendors/echarts/dist/echarts.min.js"></script>
    <script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
    <script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <script src="assets/vendors/iCheck/icheck.min.js"></script>
    <script src="assets/vendors/skycons/skycons.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.time.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
    <script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
    <script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
    <script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
    <script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
    <script src="assets/vendors/DateJS/build/date.js"></script>
    <script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
    <script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
    <script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <script src="assets/vendors/moment/min/moment.min.js"></script>
    <script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
  <script src="assets/js/custom.js"></script>
  <script src="assets/js/site.js"></script>
  </body>
</html>

Angular.json

  "scripts": [
              "src/assets/vendors/jquery/dist/jquery.min.js",
              "src/assets/vendors/bootstrap/dist/js/bootstrap.min.js",
              "src/assets/vendors/fastclick/lib/fastclick.js",
              "src/assets/vendors/nprogress/nprogress.js",
              "src/assets/vendors/Chart.js/dist/Chart.min.js",
              "src/assets/vendors/echarts/dist/echarts.min.js",
              "src/assets/vendors/gauge.js/dist/gauge.min.js",
              "src/assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js",
              "src/assets/vendors/iCheck/icheck.min.js",
              "src/assets/vendors/skycons/skycons.js",
              "src/assets/vendors/Flot/jquery.flot.js",
              "src/assets/vendors/Flot/jquery.flot.pie.js",
              "src/assets/vendors/Flot/jquery.flot.time.js",
              "src/assets/vendors/Flot/jquery.flot.stack.js",
              "src/assets/vendors/Flot/jquery.flot.resize.js",
              "src/assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js",
              "src/assets/vendors/flot-spline/js/jquery.flot.spline.min.js",
              "src/assets/vendors/flot.curvedlines/curvedLines.js",
              "src/assets/vendors/DateJS/build/date.js",
              "src/assets/vendors/jqvmap/dist/jquery.vmap.js",
              "src/assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js",
              "src/assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js",
              "src/assets/vendors/moment/min/moment.min.js",
              "src/assets/vendors/bootstrap-daterangepicker/daterangepicker.js",
              "src/assets/js/custom.js",
              "src/assets/js/site.js"

            ]
          },

custom.js文件

var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
    $BODY = $('body'),
    $MENU_TOGGLE = $('#menu_toggle'),
    $SIDEBAR_MENU = $('#sidebar-menu'),
    $SIDEBAR_FOOTER = $('.sidebar-footer'),
    $LEFT_COL = $('.left_col'),
    $RIGHT_COL = $('.right_col'),
    $NAV_MENU = $('.nav_menu'),
    $FOOTER = $('footer');

当我插入网站模板时，此代码不起作用，但是当我单击运行模板浏览器时，此代码便起作用

$MENU_TOGGLE.on('click', function() {
        console.log('clicked - menu toggle');

        if ($BODY.hasClass('nav-md')) {
            $SIDEBAR_MENU.find('li.active ul').hide();
            $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
        } else {
            $SIDEBAR_MENU.find('li.active-sm ul').show();
            $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
        }

    $BODY.toggleClass('nav-md nav-sm');

    setContentHeight();
});

似乎渲染了javascript，但是当我单击按钮来切换菜单或任何与jquery一起使用的控件时，它不起作用

如何将外部js jquery脚本从html网站模板修复为有角项目

0 个答案: