2016-10-03 1 views
0

구문을 이해할 수 없었습니다. 두 번째 버튼을 클릭하면 드롭 다운 메뉴가 나타납니다.이 탐색 탭을 드롭 다운 메뉴로 만드는 방법 알아보기

<!DOCTYPE html> 
<head> 

    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <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" integrity= 
    "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= 
    "anonymous" type="text/css" /> 

    <!-- Font Awesome --> 

    <script src="https://use.fontawesome.com/926120954b.js" type="text/javascript"> 
</script> 

<!-- My CSS --> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 


</head> 

<body> 


<ul class="nav nav-tabs"> 
    <li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li> 

<!-- ****BEGIN THE DROPDOWN TAB--> 

<li role="Presentation" class="dropdown-menu"> 
    <a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
    Community <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li>item</li> 
    </ul> 
    </li> 




<!-- ***END THE DROPDOWN TAB --> 


    <li role="presentation"><a href="#">Pet Help</a></li> 
    <li role="presentation"><a href="#">Pets for Sale</a></li> 
    <li role="presentation"><a href="#">Pet Services</a></li> 

</ul> 








<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type= 
    "text/javascript"> 
</script> 
</body> 
</html> 

내 첫 번째 시도는 탐색 메뉴입니다. (어떤 이유로, "세부 사항"을 제공하지 않으면이 질문을 제출할 수 없으므로이 의미없는 텍스트를 용서하십시오.)

+0

나는이 함께 할 대해 해요. 나는 질문을 던진다. 투표가 내려진다. 미안하지만이 질문에 답을 얻지 못했지만 "내 부하들"과 같은 "냉정한"의견이 아니기 때문에 내 질문에 투표가 중단되면 다른 리소스를 찾을 수 있습니다. 그것의 진짜 문제 없음. – ZeroCalm

답변

4

햄버거 탐색에 필요한 부트 스트랩의 자바 스크립트 라이브러리에 대한 호출이 누락되었습니다. Getting Started뿐만 아니라 아래에 업데이트 된 코드 : 당신이 JQuery와 참조를 추가 한 후 부트 스트랩 설명서 페이지를 참조하십시오이 추가 자세한 내용은 (즉 <script src="...jquery.min.js"...)

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

을보십시오.

<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= 
 
    "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= 
 
    "anonymous" type="text/css" /> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type= 
 
    "text/javascript"> 
 
</script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <!-- Font Awesome --> 
 
    <script src="https://use.fontawesome.com/926120954b.js" type="text/javascript"> 
 
</script> 
 

 
<!-- My CSS -- > 
 
<link rel="stylesheet" type="text/css" href="mystyle.css">--> 
 
<!--end head: </head> start body:<body>--> 
 

 
<ul class="nav nav-tabs"> 
 
    <li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li> 
 

 
<!-- ****BEGIN THE DROPDOWN TAB--> 
 

 
<li role="Presentation" class="dropdown-menu"> 
 
    <a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
    Community <span class="caret"></span> 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
     <li>item</li> 
 
    </ul> 
 
    </li> 
 

 
<!-- ***END THE DROPDOWN TAB --> 
 
    <li role="presentation"><a href="#">Pet Help</a></li> 
 
    <li role="presentation"><a href="#">Pets for Sale</a></li> 
 
    <li role="presentation"><a href="#">Pet Services</a></li> 
 

 
</ul>

+0

응답 해 주셔서 감사합니다. – ZeroCalm

+0

감사합니다. 마지막에 내 태그 바로 앞에 추가하고 Comment 및 Still no luck 바로 앞에서 시도했습니다. – ZeroCalm

+0

@ ZeroCalm jQuery 소스의 스크립트 태그 바로 뒤에 스크립트 태그를 넣으십시오. '' 태그 바깥으로 나가면 안됩니다 ... –

관련 문제