부트 스트랩 드롭 다운이 해제되지 않는 메뉴

어디에서나 보았지만 내 솔루션에 대한 답을 찾지 못하는 것 같습니다. 나는 내 웹 사이트 용 navbar를 만드는 방법에 대한 자습서를 따르고 있으며 모바일 친화적 인 것으로 만들기 위해 노력 중이다. navbar가 더 작은 장치의 메뉴를 un-collaps하는 버튼을 표시하길 원합니다. 그러나 jQuery를 추가 한 후에도 여전히 메뉴가 열리지 않습니다.부트 스트랩 드롭 다운이 해제되지 않는 메뉴

내 코드는 다음과 같습니다. 잘하면 간과하기 쉬운 간단한 수정입니다. 사전에 도움을

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Personal Website</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="styles/main.css"> 
 

 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <!-- Logo --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a href="#" class="navbar-brand">Test</a> 
 
     </div> 
 

 
     <!-- Menu Items --> 
 
     <div class="collapse navbar-collapse" id="mainNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a> </li> 
 
       <li><a href="#">About</a> </li> 
 
       <li><a href="#">Contact</a> </li> 
 

 
       <!-- Drop Down Menu --> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">About</a> </li> 
 
         <li><a href="#">Contact</a> </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 

 
      <!-- Right Align --> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">Logout</a> </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 
</body> 
 

 
</html>

감사합니다!

출처

2017-03-02 LJP1203

만data-target="mainNavbar"이data-target="#mainNavbar"

업데이트 한 줄을 교체 업데이트 만

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">

<meta charset="UTF-8"> 
 
<title>Personal Website</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="styles/main.css"> 
 

 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <!-- Logo --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a href="#" class="navbar-brand">Test</a> 
 
     </div> 
 

 
     <!-- Menu Items --> 
 
     <div class="collapse navbar-collapse" id="mainNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a> </li> 
 
       <li><a href="#">About</a> </li> 
 
       <li><a href="#">Contact</a> </li> 
 

 
       <!-- Drop Down Menu --> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">About</a> </li> 
 
         <li><a href="#">Contact</a> </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 

 
      <!-- Right Align --> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">Logout</a> </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

출처

2017-03-02 06:51:19

나는 튜토리얼의 일부를 놓쳐 버렸습니다. -_ ... 멍청한 실수지만 당신이 그것을 잡았습니다! 도와 주셔서 감사합니다! – LJP1203

환영합니다 @ LJP1203 –

버튼에 실수가 있습니다. 데이터 타겟 속성에 #을 넣는 것을 잊었습니다.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button>

출처

2017-03-02 06:56:02

@ LJP1203 왜 저를 다운 시키셨습니까? –

당신의 대답이 참이기 때문에 i votes +1. –

부트 스트랩 드롭 다운이 해제되지 않는 메뉴

답변

관련 문제