我的addClass和removeClass代码似乎不适用于Bootstrap Glyphicons

My code for addClass and removeClass doesnt seem to work with Bootstrap Glyphicons

本文关键字：不适用 适用于 Bootstrap Glyphicons addClass removeClass 代码 我的      更新时间：2023-09-26

最近，我决定尝试使用bootstrap的glyphicons。使用 Jquery 的 addClass 和 removeClass 属性，我尝试有效地从一个字形切换到另一个字形。

以下是代码片段： 

var glyphOn = true; //Ok, glyphOn is a boolean variable to keep track whether .navList is visible or not.
$('.glyphicon').click(function() {
  if (glyphOn == true) {
    $('.navList').fadeIn(500).addClass('glyphicon-remove').removeClass('glyphicon-align-justify');
    glyphOn = false;
  } else {
    $('.navList').fadeOut(500);
    glyphOn = true;
  }
});
/*This CSS is mainly for demonstration purposes, so I believe this can be ignored. The only thing that can be noticed here is that .navList has display:none;*/
.glyphicon {
  background-color: gray;
  padding: 15px;
  font-size: 2em;
  color: white;
  cursor: pointer;
}
.navList {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--This is a sample example using two commonly used glyphicons used in Mobile Web Development.-->
<p><span class="glyphicon glyphicon-align-justify"><!--According to the bootstrap documentation, I should leave the content inside this tag completely empty.--></span>
</p>
<ul class="navList">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

现在，如果这是一个简单的问题，我很抱歉，但是我已经在网上搜索了解决方案，但没有成功。

为了澄清起见，我将声明目标和问题：

目标：有效地找到一种在元素内切换字形的方法。（在本例中：在移动菜单标志符号和退出标志符号之间切换。

问题我编码的代码片段无法按预期工作。

并提前感谢任何评论和回答:)的人

var glyphOn = true; //Ok, glyphOn is a boolean variable to keep track whether .navList is visible or not.
$('.glyphicon').click(function() {
  if (glyphOn == true) {
    $('.navList').fadeIn(500);
    $(this).addClass('glyphicon-remove').removeClass('glyphicon-align-justify');
    glyphOn = false;
  } else {
    $('.navList').fadeOut(500);
    $(this).removeClass('glyphicon-remove').addClass('glyphicon-align-justify');
    glyphOn = true;
  }
});

Khalid 在评论中指出，您犯的错误是您将类更改为 ul 元素而不是字形元素（上面称为"this"，因为它是点击触发函数的那个）。

我试图尽可能少地回答编辑代码，但我建议您使用字形元素类的侦听器而不是全局变量来完成相同的结果，甚至更好的是，相应地切换"删除"和"对齐对齐"类，如下例所示。

$('.glyphicon').click(function() {
  $('.navList').fadeToggle(500);
  $(this).toggleClass('glyphicon-remove').toggleClass('glyphicon-align-justify');
});

只需将glyphicon-remove替换为glyphicon，它应该可以工作

$('.glyphicon').click(function () {
     if (glyphOn == true) {
        $('.navList').fadeIn(500).addClass('glyphicon').removeClass('glyphicon-align-justify');
        glyphOn = false;
     }else{
        $('.navList').fadeOut(500);
        glyphOn = true;
     }
});

尝试使用此代码

我已经把 mnIcon 类放到了 span 上，在 js 中，我使用 addClass 和 removeClass for span 而不是 ul navList。

var glyphOn = true;//Ok, glyphOn is a boolean variable to keep track whether .navList is visible or not.
    $('.glyphicon').click(function () {
   		 if (glyphOn == true) {
    		$('.navList').fadeIn(500);
    		$('.mnIcon').removeClass('glyphicon-align-justify');
    		$('.mnIcon').addClass('glyphicon-remove'); 
    		glyphOn = false;
  	     } else {
   		 	$('.navList').fadeOut(500);
			$('.mnIcon').removeClass('glyphicon-remove'); 
   		 	$('.mnIcon').addClass('glyphicon-align-justify');
   		 	glyphOn = true;
   		 }
    });
/*This CSS is mainly for demonstration purposes, so I believe this can be ignored. The only thing that can be noticed here is that .navList has display:none;*/
	.glyphicon {
		background-color: gray;
		padding: 15px;
		font-size: 2em;
		color: white;
		cursor: pointer;
	}
	.navList {
  		display: none;
  	}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class="mnIcon glyphicon glyphicon-align-justify"><!--According to the bootstrap documentation, I should leave the content inside this tag completely empty.--></span></p>
<ul class="navList">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

您必须将类添加到单击的菜单中，而不是添加到列表中： 下面的代码有效：

$('.glyphicon').click(function() {
      if (glyphOn == true) {
        $('.navList').fadeIn(500);
$(this).addClass('glyphicon-remove').removeClass('glyphicon-align-justify');
        glyphOn = false;
      } else {
        $('.navList').fadeOut(500);
$(this).addClass('glyphicon-align-justify').removeClass('glyphicon-remove');
        glyphOn = true;
      }
    });
相关文章：