javascript - Angular 项目代码中的 $(document).ready Javascript 适用于 Edge，但不适用于 chrome 或 firefox

Question

我在我的 Angular 项目的资产文件夹中添加了一个名为“custom.min.js”的文件，该文件只有以下代码：

$(document).ready(function() {
  $(".collapse-link").on("click", function() {

      console.log("hhahahaah")
      var a = $(this).closest(".x_panel"),
        b = $(this).find("i"),
        c = a.find(".x_content");
      a.attr("style") ? c.slideToggle(200, function() {
          a.removeAttr("style")
        }) : (c.slideToggle(200),
          a.css("height", "auto")),
        b.toggleClass("fa-chevron-up fa-chevron-down")
      return false
    }),
    $(".close-link").click(function() {
      var a = $(this).closest(".x_panel");
      a.remove()
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav navbar-right panel_toolbox">
  <li><a class="collapse-link" data-toggle="collapse" data-target="#contenu"><i class="fa fa-chevron-up"></i></a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Settings 1</a>
      </li>
      <li><a href="#">Settings 2</a>
      </li>
    </ul>
  </li>
  <li><a class="close-link"><i class="fa fa-close"></i></a>
  </li>
</ul>

此代码在 Edge 上运行良好，但在 Chrome 或 Firefox 上却不行

标签： javascriptjqueryangulargoogle-chrome

Answer 1

在 import 语句之后在 component.ts 中声明 $ 变量。 declare var $: any;

并在下面添加您的 jquery 代码 ngOnInit(){}并用箭头函数替换function关键字()=>

$(document).ready(()=> {
    $(".collapse-link").on("click", ()=> {
      console.log("hhahahaah")
      var a = $(this).closest(".x_panel")
        , b = $(this).find("i")
        , c = a.find(".x_content");
      a.attr("style") ? c.slideToggle(200, ()=> {
          a.removeAttr("style")
      }) : (c.slideToggle(200),
      a.css("height", "auto")),
      b.toggleClass("fa-chevron-up fa-chevron-down")
  return false}),
  $(".close-link").click(()=> {
      var a = $(this).closest(".x_panel");
      a.remove()
  })
  });