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

我想即使是我也很简单，但是当我单击hamburguer图标时，它向我显示一条消息“ $（'...'）。fadeToggle（）不是函数”。我看到有人说这是因为jQuery选择器必须指向一个元素而不是一个对象，但是我不能自己弄清楚如何在这种情况下进行修复。如果你们能帮助我，我将感到非常高兴！

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

提前谢谢！

Answer 1

请注意，我遇到了这个问题，因为我在不知不觉中包括了SLIM版本，该版本显然抛弃了诸如fadgeToggle之类的漂亮动画。

fadeToggle不是函数

1 个答案: