부트 스트랩 nav 드롭 다운 this.hash 정의되지 않음

Question

내 탐색 메뉴를 만들기 위해 노력하고 있습니다. 효과가 있습니다. 그러나 드롭 다운을 클릭 할 때마다 다음과 같은 오류가 발생합니다.

TypeError: $(...).offset(...) is undefined 

$('html, body').animate({ scrollTop: $(this.hash).offset().top - 5 }, 1000); 

여기 내 HTML입니다.

<div class="main-nav"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="index.html"> 
         <h1> 
          <img class="img-responsive" src="images/logo.png" alt="logo"></h1> 
        </a> 
       </div> 
       <div class="collapse navbar-collapse" id="navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="scroll active"><a href="#home">Home</a></li> 
         <li class="dropdown"> 

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Service<span class="caret"></span></a> 

          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#services">Asset Management</a></li> 
           <li class="divider" role="separator"></li> 
           <li><a href="/Service">Asset Management</a></li> 
           <li><a href="/Service">Consulting</a></li> 
           <li><a href="/Service">Due Diligence</a></li> 
           <li><a href="/Service">HOA Account Management</a></li> 
           <li><a href="/Service">Loan Services</a></li> 
           <li><a href="/Service">Property Maintenance and Inspections</a></li> 
           <li><a href="/Service">Property Management</a></li> 
           <li><a href="/Service">Real Estate Brokerage</a></li> 
           <li><a href="/Service">Tax Account Management</a></li> 
           <li><a href="/Service">Utility Account Management</a></li> 
          </ul> 
         </li> 
         <li class="scroll"><a href="#about-us">About Us</a></li>        

         <li class="scroll"><a href="#contact">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 

여기 내 main.js에는 열기 및 닫기를 처리하는 코드가 있습니다.

$('.navbar-collapse ul li a').on('click', function() { 
    $('html, body').animate({ scrollTop: $(this.hash).offset().top - 5 }, 1000); 
    return false; 
}); 

나는이 오류를주는 이유를 알아 내려고하고 있습니다.

Answer 1

문제는

$('.navbar-collapse ul li a').on('click', function() { 
    $('html, body').animate({ scrollTop: $(this.hash).offset().top - 5 }, 1000); 
    return false; 
}); 

어떤 ul 내부의 li 내부의 앵커 a을 선택합니다 jQuery를 선택에 있지만 마크 업을 자세히 보면 당신은이 dropdown-toggle 앵커 사로 잡고 통지 :

을

<div class="collapse navbar-collapse" id="navbar-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="scroll active"><a href="#home">Home</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Service<span class="caret"></span></a> 
      <!-- There is a nested ul that you need to get to --> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#services">Asset Management</a></li> 
       <li class="divider" role="separator"></li> 
       <li><a href="/Service">Asset Management</a></li> 
       <li><a href="/Service">Consulting</a></li> 
       <li><a href="/Service">Due Diligence</a></li> 
       <li><a href="/Service">HOA Account Management</a></li> 
       <li><a href="/Service">Loan Services</a></li> 
       <li><a href="/Service">Property Maintenance and Inspections</a></li> 
       <li><a href="/Service">Property Management</a></li> 
       <li><a href="/Service">Real Estate Brokerage</a></li> 
       <li><a href="/Service">Tax Account Management</a></li> 
       <li><a href="/Service">Utility Account Management</a></li> 
      </ul> 
     </li> 
     <li class="scroll"><a href="#about-us">About Us</a></li>        

      <li class="scroll"><a href="#contact">Contact</a></li> 
     </ul> 
</div> 

선택기를

$('.navbar-collapse ul ul li a').on('click', function() { 
    $('html, body').animate({ scrollTop: $(this.hash).offset().top - 5 }, 1000); 
    return false; 
}); 

로 변경하십시오.

희망이 있습니다.