jquery - toggleClass 不会删除 'showing' 的类

Question

我正在尝试为我的网站提供一个基本的 jquery 汉堡包菜单图标，您可以单击它，它会变成一个十字。一切正常，直到我想添加一个“显示”类来显示我的菜单内容。我可以让它显示菜单内容，但是一旦我想点击十字回到汉堡包菜单栏，它就不再工作了。任何建议...谢谢

$('.menu-icon').click(function() {
  $(this).toggleClass('show');
  $('ul').toggleClass('showing');
})

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  width: 2rem;
  height: 3px;
  background: blue;
  display: block;
  transition: all ease-in-out 350ms;
}

.hamburger::before {
  transform: translateY(-7px);
}

.hamburger::after {
  transform: translateY(4px);
}

.show .hamburger {
  transform: rotate(45deg);
}

.show .hamburger::before {
  display: none;
}

.show .hamburger::after {
  transform: rotate(-90deg);
}

@media screen and (min-width: 300px) {

    .btn--large {
        position: relative;
        top: 20px;
        padding: .6rem 1.8rem;
    }

    .menu-icon {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    ul {
        display: none;
    }

    .showing {
        display: block;
    }

    .btn-origin {
        display: none;
    }

    .header-logo {
        position: absolute;
        width: 70px;
        height: 60px;
        left: 50%;
        transform: translateX(-50%);
    }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class='wrapper'>

    <img class='header-logo' src="assets/images/logo.jpg" alt="a logo">

    <a class='btn btn-origin' href="#">Get in touch</a>
    <div class='menu-icon'>
      <div class='hamburger'></div>
    </div>
    <div class='menu-content'>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>


  </div>
</header>

Answer 1

不确定预期的输出是什么，但您的代码似乎运行良好，请参见下文:

$('.menu-icon').click(function() {


    $(this).toggleClass('show');

    $('ul').toggleClass('showing');


})

.hamburger, .hamburger::before, .hamburger::after {
        content: '';
        width: 2rem;
        height: 3px;
        background: blue;
        display: block;
        transition: all ease-in-out 350ms;
    }

    .hamburger::before {
        transform: translateY(-7px);
    }

    .hamburger::after {
        transform: translateY(4px);
    }

    .show .hamburger {
        transform: rotate(45deg);
    }

    .show .hamburger::before {
        display: none;
    }

    .show .hamburger::after {
        transform: rotate(-90deg);
    }




@media screen and (min-width: 300px) {

    .btn--large {
        position: relative;
        top: 20px;
        padding: .6rem 1.8rem;
    }

    .menu-icon {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    ul {
        display: none;
    }

    .showing {
        display: block;
    }

    .btn-origin {
        display: none;
    }

    .header-logo {
        position: absolute;
        width: 70px;
        height: 60px;
        left: 50%;
        transform: translateX(-50%);
    }

}
/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a class='btn btn-origin' href="#">Get in touch</a>
                <div class='menu-icon'>
                    <div class='hamburger'></div>
                </div>
                <div class='menu-content'>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Location</a></li>
                    </ul>
                </div>