toggleClass 不会删除“显示”类

Posted 2023-02-16

【中文标题】toggleClass 不会删除“显示”类

【英文标题】：the toggleClass will not remove the class of 'showing'

【发布时间】：2018-07-11 03:24:36

【问题描述】：

我想给我的网站一个基本的 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" >

    <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>

【问题讨论】：

您的代码运行良好。

当我应用最小宽度为 400 像素和 800 像素的媒体查询以使我的网站响应时，我从 css 文件中取出了我的代码。我想我搞砸了，可能是我的代码在尝试创建响应式网站时组织得不好，我可能会在某处应用一些规则来阻止它工作。但感谢您查看。祝你有美好的一天。

【参考方案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>

【讨论】：

谢谢，可能是它在我的整个 css 文件中不起作用，我可能应用了一些规则阻止它正常工作。