个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 14:08:55 36 4
gpt4 key购买 nike

我有一个 Blazor 站点，我正在使用具有 CSS 和 JS 样式的 HTML 模板。
我已将 Assets 导入 wwwroot，并在 _Host.cshtml 文件中对它们进行了引用；样式和某些元素似乎正在工作......但是我注意到动画和 javascript 的其他部分没有按预期工作......
例如，我有一个 Accordion ，它不会展开或关闭。
我以 HTML 格式制作了相同的页面并将其放在 wwwroot 中......当我运行代码并导航到该页面时，它似乎工作得很好。但是在我的 Razor 页面上，它不是...
这是 .razor 组件上的内容
accordion does not expand on .razor
这是我在 wwwroot 中制作的 .html 文件
accordion works on .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( Accordion 函数) 
 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]);
    }
  })();

最佳答案

下午好，
根据我在 Blazor 组件中调用 Javascript 的经验，需要使用 IJS 运行时。这是此问题的 Microsoft Blazor 文档:
https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0
本质上，您使用 IJS 运行时从您的自定义 JS 文档中调用特定方法。

关于javascript - Blazor - JavaScript/Bootstrap 动画和脚本在 blazor 组件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66142666/

36 4 0
文章推荐： GIT 提交错误 - WSL2 中的 VSCODE(错误 : gpg failed to sign the data fatal: failed to write commit object)
文章推荐： angular - 失败 : Cannot read property 'setValue' of undefined for a login test
文章推荐： youtube-api - 将字幕发送到 YouTube 直播
文章推荐： kubernetes:无法加载现有证书 apiserver-etcd-client:
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com