ブートストラップ4 - 非表示のnavbar collapseは機能しますが、リンクが機能しません。

画面幅がポイントまで減少したときにモバイルメニューに折りたたまれているナビゲーションバーがあります。リンクは、ページ上のコンテンツに表示され、非表示になります。ブートストラップ4 - 非表示のnavbar collapseは機能しますが、リンクが機能しません。

私はそれを自動的に隠すように取得しようとしていた他の誰かのためにthis answerを見つけたので、私はクリックで閉じるには、メニューを引き起こし、私の<a>タグにdata-toggle="collapse" data-target=".nav-collapse.show"を追加しました、しかし今では、リンクをたどらないともうURLを更新。

上記のリンクからのブートストラップ4の偶数this linkも正常に機能せず、自動的にメニューを閉じますが、href="#whatever"は完全に無視されます。上記の例ではcodeply

、<a>タグはこのようになりますとき：

<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>

それは後に折りたたまれ、メニューを非表示になりますが、デモウィンドウでURL http://www.codeply.com/api/runは変更されません。 <a>タグは、このようなdata-toggle="collapse" data-target=".navbar-collapse.show"持っていないとき

は、しかし：

<a class="nav-link" href="#about-us">About</a>

をデモウィンドウ内のURLはhttp://www.codeply.com/api/run#about-usに更新されませんが、メニューはもはや選択後に非表示になります。

私は同様の問題のために発見したthis oneのような他の回答はJavascriptを追加するために人々に伝える代わりにHTMLを編集しますが、ブートストラップするために新しいもの、私はJavascriptを置くためまったく手がかりを持っていません。

私が現在使っているブラウザはChromium on Linuxです。

メニューをクリックして非表示にするにはどうしたらいいですか？

編集：要求されたとして、ここでは（私は私の個人情報を編集した）私の完全なコードです：（あまりにとobvs collapse.js）bootstrap.jsで

<!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=""> 
    <!--<link rel="icon" href="../../favicon.ico">--> 

    <title>Portfolio</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <link href="style.css" rel="stylesheet"> 
</head> 
<body> 
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#menuNavbar" aria-controls="menuNavbar" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">My Portfolio</a> 

     <div class="collapse navbar-collapse" id="menuNavbar"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#" data-toggle="collapse" data-target="#menuNavbar.show">Home<span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#about" data-toggle="collapse" data-target="#menuNavbar.show">About</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#skills" data-toggle="collapse" data-target="#menuNavbar.show">Skills/knowledge</a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" id="portfolio-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a> 
        <div class="dropdown-menu" aria-labelledby="portfolio-dropdown"> 
         <a class="dropdown-item" href="https://github.com/username/repo1">repo1</a> 
         <a class="dropdown-item" href="https://github.com/username/repo2">repo2</a> 
         <a class="dropdown-item" href="https://github.com/username/repo3">repo3</a> 
         <a class="dropdown-item" href="#portfolio" data-toggle="collapse" data-target="#menuNavbar.show">More</a> 
        </div> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#resume" data-toggle="collapse" data-target="#menuNavbar.show">Résumé</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#contact" data-toggle="collapse" data-target="#menuNavbar.show">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 

    <div class="container"> 

     <div class="introduction" id="home"> 
      <h1>My Portfolio</h1> 
      <p class="lead">Placeholder text</p> 
     </div> 

     <div class="about-me" id="about"> 
      <h2>About Me</h2> 
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula viverra metus. Etiam in vestibulum ipsum, ac dignissim libero. Morbi vel tortor hendrerit, mattis nunc ut, ornare dolor. Ut porttitor, augue in pellentesque facilisis, massa mauris faucibus lorem, eget tincidunt nisi massa sit amet urna. Donec eu libero vel nisl tempor ultrices at at diam. Cras pellentesque non purus vel consectetur. Sed eget molestie leo. Ut scelerisque nibh non tortor congue, non suscipit augue congue. Nunc suscipit libero accumsan facilisis vulputate. Etiam ornare, felis sit amet feugiat rhoncus, est nulla pellentesque mauris, eu vulputate est lectus vel diam. Maecenas vel congue ipsum. Etiam scelerisque, dolor eu mattis aliquam, nibh lacus finibus lectus, quis tempus dui turpis nec purus. Curabitur vel tortor ipsum. Maecenas lacinia porttitor molestie. Ut pulvinar dolor at risus consectetur pulvinar. Fusce posuere mauris ut dui scelerisque vulputate.</p> 
     </div> 

     <div class="skills-knowledge" id="skills"> 
      <h2>Skills and Knowledge</h2> 
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam quam, consectetur volutpat nibh at, sagittis mollis nulla. Nunc id porta ante. Donec auctor, lorem eu efficitur dignissim, elit nulla congue ante, congue facilisis augue erat id risus. Nulla facilisi. Ut vitae consequat erat. Morbi volutpat sem vitae ex mattis molestie tristique vitae magna. Phasellus egestas rhoncus justo quis tincidunt. Nunc sed enim congue, posuere lectus et, placerat tortor. Aliquam purus orci, pharetra a tortor vel, posuere vehicula ipsum.</p> 
     </div> 

     <div class="portfolio" id="portfolio"> 
      <h2>Portfolio</h2> 
      <p class="lead">Some projects I have worked on can be found on my <a href="https://github.com/username">GitHub</a>.</p> 
     </div> 

     <div class="resume" id="resume"> 
      <h2>Résumé</h2> 
      <p class="lead">A link to my résumé will be here in the future.</p> 
     </div> 

     <div class="contact-info" id="contact"> 
      <h2>Contact Info</h2> 
      <p class="lead">My phone number and email will be here in the future.</p> 
     </div> 

    </div><!-- /.container --> 

    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="js/bootstrap.js"></script> 
</body> 
</html>

出典

2017-04-26 PhantomWhiskers

あなたのコードを共有してください...私はこのことから続く問題が発生したためにまだ持ってbuuuuuuut、これはおそらく、冒涜と恐ろしい考えであることを実感...

をあなたのリンクが動作し、ナビゲーションバーはまだ崩壊する – athi

私は現在モバイルです。できるだけ早く質問に自分のコードを追加します。 – PhantomWhiskers

@athimohan個人情報を削除するためにマイナーな編集を加えてhtmlファイルを追加しました。 – PhantomWhiskers

このコードブロックがあります：

$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { 
 
    event.preventDefault(); 
 
    var target = Collapse._getTargetFromElement(this); 
 
    var data = $(target).data(DATA_KEY); 
 
    var config = data ? 'toggle' : $(this).data(); 
 

 
    Collapse._jQueryInterface.call($(target), config); 
 
    });

あなたはコメントアウトした場合 'event.preventDefaultを（）;'

出典

2017-09-14 19:12:50 user8523528

申し訳ありませんが、これはBootstrap v4.0.0-alpha.6 – user8523528

ブートストラップ4 - 非表示のnavbar collapseは機能しますが、リンクが機能しません。

答えて

関連する問題