toggleClass不会删除“显示”类

Question

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

id

$('.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%);
    }

}

Answer 1

不确定预期的输出是什么，但是您的代码似乎运行正常，请参见以下内容：

A

$('.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%);
    }

}
/