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

希望它有所帮助。

bootstrap nav下拉this.hash undefined

1 个答案: