Angular 9-js脚本不起作用(例如,基础或引导程序)

问题描述 投票:0回答:1

[Angular的第一步(在线课程),我一直认为我的JS无法正常工作。因为当我提供以下项目时,会看到基础样式(css),但是当我单击它时,汉堡图标未打开/关闭。该代码是来自基金会网站的示例。

app.component.html看起来像这样

<h1>This is the app</h1>

<div class="title-bar" data-responsive-toggle="main-nav" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="main-nav"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-nav">
  <div class="top-bar-left">
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">Site title</li>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Two</a></li>
    </ul>
  </div>
</div>

通过众多主题最终得到以下内容:

在我添加的styles.css中>

@import "../node_modules/foundation-sites/dist/css/foundation.min.css";

在我添加的angular.json中

 "styles": [
              "src/styles.css",
              "node_modules/foundation-sites/dist/css/foundation.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/foundation-sites/dist/js/foundation.min.js"
            ]

我对此的看法:

  • 汉堡图标和样式在那里,但没有打开/关闭
  • 我的angular.json文件未命名为angular-cli.json(就像在其他示例中一样……为什么!?)
  • 我不需要../脚本,它们只像上面那样编译(其他错误)
  • 在Unix上工作(ubuntu)
  • Jquery版本3.5.1和基金会站点6.6.3

[Angular的第一步(在线课程),我一直认为我的JS无法正常工作。因为当我为以下项目提供服务时,会看到基础样式(css),但是汉堡包图标是...

javascript html css angular zurb-foundation
1个回答
0
投票

可能有可能使它正常工作,但是普通的Bootstrap使用jQuery来操纵DOM(例如,当您单击汉堡菜单图标时,打开/关闭工具栏)。

© www.soinside.com 2019 - 2024. All rights reserved.