BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] Bootstrapのcollapseが機能しない。ハンバーガーメニューが表示されない。

2022-02-12 12:38:48

質問内容

Angularアプリケーションを作成しており、Bowerですべてのライブラリをインストールしました。コンソールを確認すると、すべてのシート/スクリプトが正しく読み込まれています。また、私の頭の中にはbootstrapとjQueryが定義されています。Bootstrapのサイトからコードをコピーしました。

問題は、ハンバーガーメニューが表示されないことです。リンクは、画面が大きいときとまったく同じままです。もう一つの問題は、サイトが大きいときでさえ、nav-collapse collapse div の中に何も表示されないということです。どうやらcollapseに問題があるようで、そのせいで両方が機能しないようです。何か提案はありますか？ 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jay - Web Developer</title>

    <!-- For Angular Routing -->
    <base href='/'>

    <!-- CSS -->
    <link rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">

    <!-- JS -->
    <script src="assets/libs/angular/angular.min.js"></script>
    <script src="assets/libs/angular-route/angular-route.min.js"></script>
    <script src="assets/libs/angular-animate/angular-animate.min.js"></script>
    <script src="assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/dist/js/bootstrap.js"></script>

    <!-- APP -->
    <script src="app/controllers/mainCtrl.js"></script>
    <script src="app/app.routes.js"></script>
    <script src="app/app.js"></script>
</head>

<body ng-app="jayPortfolio" ng-controller="mainController as main">

  <!-- NAVBAR -->
  <header>
    <div class="navbar navbar-default">
      <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar">About</span>
              <span class="icon-bar">Portfolio</span>
              <span class="icon-bar">Experience</span>
              <span class="icon-bar">Contact</span>
            </a>

            <a class="brand" href="#">JAY</a>

            <div class="nav-collapse collapse">
              work please
            </div>

          </div>
       </div>
    </div>
  </header>
</body>

</html>

解決方法は？

ナビバーのマークアップが正しくありません。マークアップは以下のようにする必要があります。 

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Huisje Thuisje</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#contact">Contact</a></li>
                <!-- Put here your menu items -->
            </ul>

        </div --><!--/.navbar-collapse -->
    </div>
</nav>

で ul 要素に、メニュー項目を配置します。これでうまくいくはずです。また ドキュメントページ .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します