Question

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

以下是代码段：

＆＃13;

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;
  }
});

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

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

为了澄清，我将宣布目标和问题：

目标：有效地找到一种方法来切换元素内部的字形。（在这种情况下：在移动菜单字形和退出字形之间切换。）

问题我编码的代码段无效。

并提前感谢任何评论和回答：）

Answer 1

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元素而不是glyphicon（因为它是点击的那个，因此上面说的是“this”）触发功能）。

我试着尽可能少地回答编辑代码，但是我建议你使用而不是全局变量来监听glyphicon元素的类，以实现相同的结果，甚至更好，相应地切换“删除”和“对齐 - 对齐”类，如下例所示。

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

Answer 2

只需将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;
     }
});

Answer 3

尝试使用此代码

我已将mnIcon类放到span并且在js中我使用了addClass和removeClass for span而不是ul navList。

＆＃13;

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;
   		 }
    });

＆＃13;

/*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;
  	}

＆＃13;

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

＆＃13;

Answer 4

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

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

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

4 个答案: