1つのページ内の1つのリンクをクリックした後にnavbarを折りたたむ方法

他のページへのリンクとこのページでも、リンクは1ページにリンクされていますが、なぜNavbarの折りたたみ機能が機能しませんか？1つのページ内の1つのリンクをクリックした後にnavbarを折りたたむ方法

これはコードです：

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="../content/main.php#home">Home</a></li> 
      <li><a href="../content/emblem.php">Emblem</a></li> 
      <li><a href="../content/history.php">History</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">The Games <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games2">Water</a></li> 
        <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games3">Non-Water</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div>

このコードはまだ私の質問は崩壊を動作させる方法です

<li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">The Games <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games2">Water</a></li> 
        <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games3">Non-Water</a></li> 
       </ul> 
      </li>

このページへリンクしていますか？

CSSファイル：：これはあなたのナビゲーションバーに崩壊する

出典

2017-02-07 Khoirul Z

jqueryコードはどこですか？ – Glubus

** bootstrap.js **または** bootstrap.min.js **のいずれかをアプリケーションにインストールし、レイアウトまたはメインページで参照しているかどうか確認してください。 Nav Collapseは** bootstrap.jsの一部です** – Prabhat

@SuprabhatBiswal私はbootstrap.min.jsを使用しました。 –

/* To Dropdown navbar dropdown on hover */ 
 
.navbar-nav > li:hover > .dropdown-menu { 
 
    display: block; 
 
} 
 
.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu>.dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -6px; 
 
    margin-left: -1px; 
 
    -webkit-border-radius: 0 6px 6px 6px; 
 
    -moz-border-radius: 0 6px 6px; 
 
    border-radius: 0 6px 6px 6px; 
 
} 
 

 
.dropdown-submenu:hover>.dropdown-menu { 
 
    display: block; 
 
} 
 

 
.dropdown-submenu>a:after { 
 
    display: block; 
 
    content: " "; 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
    border-width: 5px 0 5px 5px; 
 
    border-left-color: #ccc; 
 
    margin-top: 5px; 
 
    margin-right: -10px; 
 
}

<!DOCTYPE html> 
 

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title></title> 
 
    
 
     <link href="StyleSheet1.css" rel="stylesheet" /> 
 
    <link href="Content/bootstrap.css" rel="stylesheet" /> 
 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div> 
 

 

 
       
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
<div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 

 
    <!-- Collection of nav links and other content for toggling --> 
 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="../content/main.php#home">Home</a></li> 
 
      <li><a href="../content/emblem.php">Emblem</a></li> 
 
      <li><a href="../content/history.php">History</a></li> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">The Games <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games2">Water</a></li> 
 
        <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games3">Non-Water</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 

 
    </nav> 
 

 

 
    
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

あなたはすべてのそのスタイルシートを持っていることを確認してくださいが含まれます：あなただけだけbootstrap.cssとブートストラップを必要としています。 min.css stylesheet1は以下の例です。

出典

2017-02-07 09:24:06

1つのページ内の1つのリンクをクリックした後にnavbarを折りたたむ方法

答えて

関連する問題