Question

我需要使用此导航栏：

https://codepen.io/StephenScaff/pen/zvaCi

$("a#toggle").on('click', function(e) {
$('body').toggleClass('js-open');
$('nav').toggleClass('js-open');
    e.preventDefault();
});

$(".nav-background").on('click', function() {
  $('body, nav').removeClass('js-open');
});

在我的Angular 6项目中，但是我不知道将jQuery代码放在哪里。

我尝试将这段代码放在“ src \ assets”上，并从index.html中的脚本中调用它，但是在控制台中出现此错误：

SCRIPT5009：未定义“ $”

有人可以帮我吗？

Answer 1

您需要安装jquery：

npm install jquery --save

在angular.json中为您的项目脚本添加jquery：

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

并从ts文件导入，例如：

import * as $ from 'jquery';

在文件中进一步可以使用jquery。希望有帮助。

Answer 2

您收到的错误表明您没有将jQuery导入到代码中。

您可以通过将代码<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>添加到index.html来导入它，但是有一个更好的选择。

jQuery的权重很大，您不应该只为这小段代码添加它，而是应该使用angular。找到ID为toggle的对象，并添加onclick事件以切换变量：(click)="navOpen = !navOpen"。然后，使用body将类动态添加到nav和[class.js-open]="navOpen"。最后，在nav-background上添加onclick事件以删除类：(click)="navOpen = false"。

这里是一个示例：

<a id="toggle" href="#" (click)="navOpen = !navOpen"><div class="menubars"></div></a>
<nav [class.js-open]="navOpen">
  <div class="nav-background" (click)="navOpen = false">
    <ul>
      <li>
        <p>Introducing...</p>
        <a href="">Home</a>
      </li>
      <li>
        <p>Who we are, what we do</p>
        <a href="#">About Us</a>
      </li>
      <li>
        <p>What we think</p>
        <a href="#">The Blog</a>
      </li>
      <li>
        <p>Get to know us</p>
        <a href="#">Meet Us</a>
      </li>
      <li>
        <p>Let's talk</p>
        <a href="#">Join Us</a>
      </li>
    </ul>  
  </div>
</nav>

在Angular 6项目中包含js函数

2 个答案: