ブートストラップのナビゲーションバーは、私が検索し、多くの回答を見つけた

崩壊しないが、それらのどれも私の問題を解決していません。このコードで何が問題になっていますか？クリックするとメニューが開きますが、項目を選択するとメニューは閉じませんが、基礎となるコンテンツは正しくスクロールします。ブートストラップのナビゲーションバーは、私が検索し、多くの回答を見つけた

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>TEST</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <style> 
     section {padding-top: 50; padding-bottom: 100px; margin-top: 50px} 
    </style>} 
</head> 
<body id="page_top" data-spy="scroll" data-target=".navbar" data-offset="50"> 
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> 
       </button> 
       <a class="navbar-brand page-scroll" href="#page_top">LOGO</a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
       <li><a class="page-scroll" href="#support">Support</a></li> 
       <li><a class="page-scroll" href="#training">Training</a></li> 
       <li><a class="page-scroll" href="#about">About</a></li> 
       <li><a class="page-scroll" href="#rates">Hours &amp; Rates</a></li> 
       <li><a class="page-scroll" href="#contact">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    <header>Content for New header Tag Goes Here</header> 
    <section id="support">Content for id "support" Goes Here</section> 
    <section id="training">Content for id "training" Goes Here</section> 
    <section id="about">Content for id "about" Goes Here</section> 
    <section id="rates">Content for id "rates" Goes Here</section> 
    <section id="contact">Content for id "contact" Goes Here</section> 
<footer> 
    <p> 
     &copy;2017 
    </p> 
</footer> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </script> 
</body> 
</html>

出典

2017-03-10 Ken

コードが正常に動作している：http://www.codeply.com/go/hqEj1XMO2Q – ZimSystem

私はあなたのリンクをたどっ、それが動作しません。ビューポートをスマートフォンに変更してメニューをクリックすると、メニューを閉じることはできません。 – Ken

メニューは期待通りに機能します。 http://stackoverflow.com/a/28684484/171456 – ZimSystem

-1

あなたはそれがトリガーされたときにアイテムメニューは、メニューを閉じたい場合は、二重のメニュー、目に見える1、隠されたものを作成する必要があります。

<li><a class="page-scroll hidden-xs" href="#support">Support</a></li> 
<li><a class="page-scroll visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" href="#support">Support</a></li>

最初のものは正常に動作します。

あなたはXSを行くとき、最初のアイテムが隠されている2つ目が表示されます。 2番目のメニューにはメニューのCOLLAPSEコマンドがあることに注意してください。

正常に動作します！、それを試してみてください

EDITED

また、JavaScriptを通過それを達成することができますが、これは最も簡単な方法です。

出典

2017-03-11 03:59:21

ありがとうございます。それは動作します。とても有難い。 – Ken

これは「機能する」が、より広い視線でクリックすると望ましくないちらつきを引き起こす。 – ZimSystem

@ZimSystemここでは、すべてのサイズまたは解像度の画面でうまく動作します。 –

ブートストラップのナビゲーションバーは、私が検索し、多くの回答を見つけた

答えて

関連する問題