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; 
}); 

將選擇任何li內的任何錨a任何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; 
}); 

希望它有幫助。