bootstrap nav dropdown this.hash undefined

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

Проблема заключается в селекторе JQuery

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

будет выбрать любой якорь a внутри любого li внутри любого ul, но если вы внимательно посмотрите на разметку вы заметите, что он будет захватывать 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; 
}); 

Надеюсь, это поможет.