[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的第一步(在线课程),我一直认为我的JS无法正常工作。因为当我为以下项目提供服务时,会看到基础样式(css),但是汉堡包图标是...
可能有可能使它正常工作,但是普通的Bootstrap使用jQuery来操纵DOM(例如,当您单击汉堡菜单图标时,打开/关闭工具栏)。