正文 

当前位置： 首页 > 源码 >

toggleClass 不会删除“显示”类

     2023-02-16     48

关键词：

【中文标题】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 文件中不起作用，我可能应用了一些规则阻止它正常工作。

jquery属性与样式——删除样式.removeclass()和切换样式.toggleclass()

   删除样式.removeClass()和切换样式.toggleClass()1  .removeClass()从匹配的元素中删除全部或者指定的class2  .removeClass()的2种方法  .removeClass([className])每个匹配元素移除的一个或多个用空格隔开的样式名&... 查看详情

jquery表单

...显示/隐藏，直接用的时候就是起到显示/隐藏的作用，而toggleClass就可以理解为显示/隐藏类（其实是添加删除类）。coding顺序都是先绑定事件，再分析功能实现的逻辑顺序，然后再去实现它，最后再修复bug。做AJAX练习时，总是没... 查看详情

单击引导下拉项，使用toggleClass Jquery更改按钮类

】单击引导下拉项，使用toggleClassJquery更改按钮类【英文标题】：Bootstrapdropdownitemclicked,changebuttonclassusingtoggleClassJquery【发布时间】：2018-08-0804:11:26【问题描述】：目前我的网站上有多个按钮，这些组件使用引导程序。单击每个... 查看详情

vue中点击div里的当前元素添加class删除其他兄弟元素的class？

toggleClass方法可以实现对某一class进行添加、删除操作。示例：1$('#test').toggleClass('className');上面的代码将会依次为id为test的元素添加/删除名为className的class，如果test元素存在className，则删除className，如果不存在则添... 查看详情

jq03

...个类属性$("button").click(function()$("h1,h2,p").removeClass("blue"););toggleClass()--对被选元素进行添加、删除类属性的切换操作$("button").click(function()$("h1,h2,p").toggleClass("blue"););css()--返回、设置被选元素1个或多个样式属性$("p").css("background-color... 查看详情

jquery——切换toggle

toggle()-----显示隐藏toggleClass-------添加类或者删除类<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="jquery-1.11.1.js"></scri 查看详情

原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法(

 <!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>addclass,removeclass,hasclass,toggleclass,getbyclass</title></head><body><divcla 查看详情

jquerycss类

...加一个或多个类removeClass()-从被选元素删除一个或多个类toggleClass()-对被选元素进行添加/删除类的切换操作css()-设置或返回样式属性实例样式表下面的样式表将用于本页的所有例子：.important{f 查看详情

原生js实现addclass,removeclass,toggleclass

...定的dom元素添加样式2.removeClass:删除指定dom元素的样式3.toggleClass:如果存在(不存在)，就删除(添加)一个样式4.hasClass:判断样式是否存在  查看详情

jQuery悬停中断toggleClass

】jQuery悬停中断toggleClass【英文标题】：jQueryhoverinterruptingtoggleClass【发布时间】：2020-09-0700:37:38【问题描述】：所以下面是我的脚本。我打算做一些非常基本的事情，即悬停在不同按钮（常规/非活动和活动）上时具有不同的背... 查看详情

Proguard 不会删除某些类

】Proguard不会删除某些类【英文标题】：Proguarddoesnotremovecertainclasses【发布时间】：2013-09-2301:05:17【问题描述】：全部我正在使用proguard来混淆scala应用程序。此时我使用的scala-library很少，但我的jar仍然是~300KB，其中99%是scala-librar... 查看详情

「网易官方」极客战记（codecombat）攻略-网页开发2-转换-toggulation

(点击图片进入关卡)toggleClass，打开和关闭类，在页面中增进交互性！简介toggleClass（）函数分别根据元素的类是否存在来添加和删除一个类。默认代码<!--‘toggleClass‘jQuery函数打开/关闭--><!--...类是否关闭/开启--> <... 查看详情

「网易官方」极客战记（codecombat）攻略-网页开发2-转换-toggulation

(点击图片进入关卡)toggleClass，打开和关闭类，在页面中增进交互性！简介toggleClass（）函数分别根据元素的类是否存在来添加和删除一个类。默认代码<!--‘toggleClass‘jQuery函数打开/关闭--><!--...类是否关闭/开启--> <... 查看详情

在 ToggleClass 上转发动画

】在ToggleClass上转发动画【英文标题】：ForwardinganimationonToggleClass【发布时间】：2021-11-1903:14:46【问题描述】：我正在尝试显示一个带有jquery动画的toggleClass的全屏菜单。我可以做到，但我希望转发关闭菜单的动画具有相同的效果... 查看详情

jquerycss类(代码片段)

...或多个CSS类removeClass()从指定元素中删除一个或多个CSS类toggleClass()对指定元素进行添加或删除CSS类的切换操作css()设置或返回样式属性addClass()方法addClass()方法用于向指定元素添加一个或多 查看详情

Proguard 不会删除内部类中的 Log.d？

】Proguard不会删除内部类中的Log.d？【英文标题】：ProguarddoesnotremoveLog.dininternalclasses?【发布时间】：2015-03-2701:46:20【问题描述】：我用-assumenosideeffectsclassandroid.util.LogpublicstaticbooleanisLoggable(java.lang.String,int);publicstaticintv(. 查看详情

jquery操作

...加一个或多个类removeClass()-从被选元素删除一个或多个类toggleClass()-对被选元素进行添加/删除类的切换操作css()-设置或返回样式属性<br/>width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。height()方法设置或... 查看详情

Jquery淡入+切换类（隐藏）

】Jquery淡入+切换类（隐藏）【英文标题】：JqueryfadeIn+toggleclass(hide)【发布时间】：2014-07-1208:32:05【问题描述】：我想要的效果是(1)“abc”div最初没有显示，(2)它在页面加载时慢慢淡入，(3)页面上有一个按钮，onclick可以切换“隐... 查看详情