Blazor - JavaScript/引导动画和脚本在 blazor 组件中不起作用

Question

我有一个 Blazor 站点，我正在使用一个 HTML 模板，该模板具有 CSS 和 JS 用于样式设置。

我已将资产导入 wwwroot，并在 _Host.cshtml 文件中对它们进行了引用； 样式和某些元素似乎正在工作......但是我注意到 javascript 的动画和其他部分没有按预期工作......

例如，我有一个手风琴，它不会展开或关闭。

我以 HTML 格式制作了相同的页面，并将其放入 wwwroot ...当我运行代码并导航到该页面时，它似乎工作得很好。 但是在我的 razor 页面上，它不是...

这是它在.razor组件上

这是我在wwwroot中制作的.html文件

这是代码...

_Host.cshtml

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Template Mo">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

    <title>Online Quoting Tool</title>

    <link rel="stylesheet" type="text/css" href="~/assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="~/assets/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="~/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="~/assets/css/owl-carousel.css">

</head>
<body>
    <!-- ***** Preloader Start ***** -->
    <div id="preloader">
        <div class="jumper">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <!-- ***** Preloader End ***** -->
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>



    <!-- ***** Footer Start ***** -->

    <!-- jQuery -->
    <script type="text/javascript" src="~/assets/js/jquery-2.1.0.min.js"></script>

    <!-- Bootstrap -->
    <script type="text/javascript" src="~/assets/js/popper.js"></script>
    <script type="text/javascript" src="~/assets/js/bootstrap.min.js"></script>

    <!-- Plugins -->
    <script type="text/javascript" src="~/assets/js/owl-carousel.js"></script>
    <script type="text/javascript" src="~/assets/js/scrollreveal.min.js"></script>
    <script type="text/javascript" src="~/assets/js/waypoints.min.js"></script>
    <script type="text/javascript" src="~/assets/js/jquery.counterup.min.js"></script>
    <script type="text/javascript" src="~/assets/js/imgfix.min.js"></script>

    <!-- Global Init -->
    <script type="text/javascript" src="~/assets/js/custom.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>

custom.js（手风琴函数）

 const Accordion = {
    settings: {
      // Expand the first item by default
      first_expanded: false,
      // Allow items to be toggled independently
      toggle: false
    },

    openAccordion: function(toggle, content) {
      if (content.children.length) {
        toggle.classList.add("is-open");
        let final_height = Math.floor(content.children[0].offsetHeight);
        content.style.height = final_height + "px";
      }
    },

    closeAccordion: function(toggle, content) {
      toggle.classList.remove("is-open");
      content.style.height = 0;
    },

    init: function(el) {
      const _this = this;

      // Override default settings with classes
      let is_first_expanded = _this.settings.first_expanded;
      if (el.classList.contains("is-first-expanded")) is_first_expanded = true;
      let is_toggle = _this.settings.toggle;
      if (el.classList.contains("is-toggle")) is_toggle = true;

      // Loop through the accordion's sections and set up the click behavior
      const sections = el.getElementsByClassName("accordion");
      const all_toggles = el.getElementsByClassName("accordion-head");
      const all_contents = el.getElementsByClassName("accordion-body");
      for (let i = 0; i < sections.length; i++) {
        const section = sections[i];
        const toggle = all_toggles[i];
        const content = all_contents[i];

        // Click behavior
        toggle.addEventListener("click", function(e) {
          if (!is_toggle) {
            // Hide all content areas first
            for (let a = 0; a < all_contents.length; a++) {
              _this.closeAccordion(all_toggles[a], all_contents[a]);
            }

            // Expand the clicked item
            _this.openAccordion(toggle, content);
          } else {
            // Toggle the clicked item
            if (toggle.classList.contains("is-open")) {
              _this.closeAccordion(toggle, content);
            } else {
              _this.openAccordion(toggle, content);
            }
          }
        });

        // Expand the first item
        if (i === 0 && is_first_expanded) {
          _this.openAccordion(toggle, content);
        }
      }
    }
  };

  (function() {
    // Initiate all instances on the page
    const accordions = document.getElementsByClassName("accordions");
    for (let i = 0; i < accordions.length; i++) {
      Accordion.init(accordions[i]);
    }
  })();

Answer 1

下午好，

根据我在 Blazor 组件中调用 Javascript 的经验，需要使用 IJS 运行时。 这是针对此问题的 Microsoft Blazor 文档：

https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0

本质上，您使用 IJS 运行时从您的自定义 JS 文档中调用特定方法。

Blazor - JavaScript/引导动画和脚本在 blazor 组件中不起作用

问题描述

1 个解决方案

解决方案1
3 已采纳 2021-02-10 18:19:49

Blazor - JavaScript/引导动画和脚本在 blazor 组件中不起作用

问题描述

1 个解决方案

解决方案1 3 已采纳 2021-02-10 18:19:49

解决方案1
3 已采纳 2021-02-10 18:19:49