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

Question

I added a file named 'custom.min.js' in my assets folder in my Angular project that has only this code:

 $(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>

This code works fine on Edge but doesn't on Chrome or Firefox

Answer 1

declare $ variable in component.ts after import statement. declare var $: any;

and add your jquery code in ngOnInit(){} like below and replace function keywords with arrow 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()
  })
  });