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

希望它有帮助。