fadeToggle 不是函数

Question

我试图不在这里问这个问题，因为我认为这一定很容易解决，事实是，我一个人无法解决它，所以......

我从 jsfiddle 复制了以下 Bootstrap 4 导航，它工作得很好！

        <nav>
      <ul>
        <li><a href="https://facebook.com">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Work</a></li>
      </ul>
      <div class="button">
        <a class="btn-open" href="#"></a>
      </div>
    </nav>

    <div class="overlay">
        <div class="wrap">
            <ul class="wrap-nav">
                <li><a href="#">About</a>
                <ul>
                    <li><a href="#">About Company</a></li>
                    <li><a href="#">Designers</a></li>
                </ul>
                </li>
                <li><a href="#">Services</a>
                <ul>
                    <li><a href="https://www.google.hr/">Web Design</a></li>
                    <li><a href="#">Development</a></li>
                    <li><a href="#">Apps</a></li>
                    <li><a href="#">Graphic design</a></li>
                    <li><a href="#">Branding</a></li>
                </ul>
                </li>
                <li><a href="#">Work</a>
                <ul>
                    <li><a href="#">Web</a></li>
                    <li><a href="#">Graphic</a></li>
                    <li><a href="#">Apps</a></li>
                </ul>
                </li>
            </ul>
            <div class="social">
                <a href="http://mario-loncarek.from.hr/">
                <div class="social-icon">
                    <i class="fa fa-facebook"></i>
                </div>
                </a>
                <a href="#">
                <div class="social-icon">
                    <i class="fa fa-twitter"></i>
                </div>
                </a>
                <a href="#">
                <div class="social-icon">
                    <i class="fa fa-codepen"></i>
                </div>
                </a>
                <a href="#">
                <div class="social-icon">
                    <i class="fa fa-behance"></i>
                </div>
                </a>
                <a href="#">
                <div class="social-icon">
                    <i class="fa fa-dribbble"></i>
                </div>
                </a>
                <p>
                    From: Zagreb, Croatia<br>
                     Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
                </p>
            </div>
        </div>
    </div>

这就是 JS

$(document).ready(function(){
    $(".button a").click(function(){
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
    $('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

我想这很简单，即使对我来说也是如此，但是当我点击汉堡包图标时，它会显示一条消息“$('...').fadeToggle() 不是函数”。我看到人们说这是因为 jQuery 选择器必须指向一个元素而不是一个对象，但我自己无法弄清楚如何在这种情况下修复。如果你们能帮助我，我会很高兴！

P.S：我没有放 CSS 因为它没问题，唯一的问题是 fadeToogle 错误。

提前谢谢你！

Answer 1

只是提醒一下，我遇到了这个问题，因为我在不知不觉中包含了 SLIM 构建，它显然放弃了漂亮的动画，例如 fadeToggle。