부트 스트랩 드롭 다운 기능이 작동하지 않습니다.

Question

부트 스트랩 드롭 다운 탐색 문제를 해결하는 데 도움이 필요합니다. 내가 사용할 수있는 모든 규칙을 따라했지만 뭔가를 놓치고 있습니다. 도와주세요.

서비스 탭에는 캐럿을 클릭 할 때 열리는 두 개의 드롭 다운이 있습니다. 그러나 웹 사이트 CSS는 그렇게 할 수 없습니다.

<!-- navbar-header --> 
     <div class="header-nav">    
<nav class="navbar navbar-default"> 
        <div class="navbar-header logo"> 
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
            <span class="sr-only">Toggle navigation</span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
           </button> 
           <h1> 
            <a class="navbar-brand" href="http://www.example.com/">Brand Name</a> 
           </h1> 
        </div> 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis"> 

         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="http://www.example.com/" class="hvr-bounce-to-bottom active">Home</a></li> 
          <li><a href="http://www.example.com/about-us.php" class="hvr-bounce-to-bottom">About</a></li> 

     <li class="dropdown"> 
      <a href="http://www.example.com/seo-service.php" class="dropdown-toggle" data-toggle="dropdown" >Services <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="http://www.example.com/seo-service.php">SEO Service</a></li> 
       <li><a href="digital-marketing-company.php">Digital Marketing</a></li> 
       </ul> 
     </li> 



<li><a href="#projects" class="hvr-bounce-to-bottom scroll">Projects</a></li> 
          <li><a href="http://www.example.com/timeline.php" class="hvr-bounce-to-bottom">Timeline</a></li> 
          <li><a href="http://www.example.com/contact-us.php" class="hvr-bounce-to-bottom">Contact</a></li> 



         </ul> 
        </div> 
        <div class="contact-bnr-w3-agile"> 
           <ul> 
            <!--<li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">info@example.com</a></li>--> 
            <li><i class="fa fa-phone" aria-hidden="true"></i>000000000 </li> 
           </ul> 
          </div> 
        <div class="clearfix"> </div> 
       </nav> 
          <div class="clearfix"> </div> 
     </div> 

Answer 1

당신은 당신의 코드에 오타가 있습니다

여기

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 

, data-target는 버튼을 클릭 할 때 전환의 대상이되고있는 사업부를 나타냅니다. 따라서 ID가 "bs-example-navbar-collapse-1"인 div를 찾고 있습니다. 이 줄은 괜찮지 만 "site-nav"와 같은 유용한 이름으로 바꾸는 것이 좋습니다. 문제가 발생하는 위치

지금, 여기에 있습니다 :

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis"> 

이것은 당신은 (제대로) 확장/축소하려고 사업부입니다. 그러나 "bs-example-navbar-collapse-1"과 다른 id "bs-example-navbar-collapse-1 navis"를 지정했습니다. 따라서 버튼을 클릭하고 있지만 ID가 일치하는 div가 없습니다. 이 문제를 해결하려면

는 "BS-예 - 네비게이션 바는 붕괴-1"대신 ("NAVIS"제거) ID를 설정합니다

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

지금, 모든 세계를 잘해야한다.

위의 jQuery 경고와 마찬가지로 jQuery 2도 이미로드되어있는 것으로 보이므로 1.12도 포함 할 필요가 없습니다. 그래서 당신이 원하는 jQuery 라이브러리를 포함하고 있는지 확인하십시오.