ブートストラップからナビゲーションバーをコピーして貼り付けました：https：//getbootstrap.com/docs/4.3/components/navbar/
このコードをプロジェクトに貼り付けると、ブラウザーをモバイルサイズに縮小してハンバーガーメニューをクリックする場合を除いて、ナビゲーションバーは機能します。メニューをクリックすると、すべて表示されますが、その後すぐに消えます。また、アンカータグを表示するには、ハンバーガーメニューを2回クリックする必要があります。これと同じことが、私が作成したナビゲーションバーにも起こります。これを以下に投稿します。
私のコード：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img id="navbarLogo" src="img/Home/Crunchsoft.techSignature.png">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar"
aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar">
<div id="navbar-items" class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
</nav>
私の_Host.cshtml：
@page "/"
@namespace Crunchsoft.techWebsite.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crunchsoft.techWebsite</title>
<base href="~/" />
@*custom css*@
<link href="css/index.css" rel="stylesheet" />
<!-- bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@*Animation*@
<link href="assets/animate.css" rel="stylesheet" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
ページの下部にスクリプトを配置し、headタグのさまざまな場所にブートストラップを配置しようとしましたが無駄になりました。
私はすでに他の多くのスタックオーバーフローソリューションを見てきました：
ドロップダウンメニュー内のブートストラップ4チェックボックスを切り替えます
クリック時にブートストラップドロップダウンを開いたままにします
そして、それから私のために働いた答えを引き出すことができませんでした。
さらに苛立たしいことに、フィドルでナビゲーションバーを作成すると、機能します。
https://jsfiddle.net/MaxTaylor/6rftaw3o/1/
編集：ブートストラップを除くすべてのスタイルシートをコメントアウトしようとしましたが、まだこの問題があります。私はBlazor.AspNetCoreを使用しています。Visual Studio Codeを使用してこれと同じことを試しましたが、機能しましたが、Blazorプロジェクトでは機能しませんでした。
私は自分の質問に対する答えを見つけました。BootstrapがDOMを操作する方法が原因で、一部のBootstrapコンポーネントがBlazorで動作しないようです。
だから私はRazorコンポーネント内に自分のナビゲーションバーを書きました
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img id="navbarLogoWords" src="/img/home/Crunchsoft.techSignature.png"/>
<button onclick="toggleNavBar()" class="navbar-toggler" type="button"
aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar">
<div id="navbar-items" class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="Services">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
</nav>
そしてそれのために私自身のJavaScriptファイルを書きました：
function toggleNavBar() {
var x = document.getElementById("navbar");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
そして、私の_Host.cshtmlにリンクを追加しました
<script src="/javaScript/scripts.js"></script>
私はBlazorを使用しているので、別のファイルでJSを使用するよりも、同じコンポーネントでC＃を使用する方が理にかなっていると思いますが、C＃の実行方法を理解できませんでした。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加