我有一个 Blazor 站点，我正在使用具有 CSS 和 JS 样式的 HTML 模板。
我已将 Assets 导入 wwwroot，并在 _Host.cshtml 文件中对它们进行了引用；样式和某些元素似乎正在工作......但是我注意到动画和 javascript 的其他部分没有按预期工作......
例如，我有一个 Accordion ，它不会展开或关闭。
我以 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>
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/