雪佛龙图标在上升后不会向下
[英]Chevron icon is not going to downward after going up
问题描述
I'm trying to toggle a chevron-icon, but nothing happen. 
我正在尝试切换人字形图标，但没有任何反应。
$("span:last").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
If I added this code below slidetoggle without if else section, then the icon change to up but not to down again . 如果我将此代码添加到slidetoggle的“ if else部分下，则图标变为，但不再变为。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
//starting jquery
<script>
$("#header").ready(function(){
$("#logo").hide();
$("#header").click(function(){
$("#logo").slideToggle("slow");
});
$("#down").click(function() {
var $changeicon= $("down");
if ($changeicon .hasclass("glyphicon-chevron-down")) {
$changeicon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}
else {
$changeicon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}
});
});
</script>
<body>
<button type ="button" class ="btn btn-success btn-lg" id ="header">
<span class ="glyphicon glyphicon-home pull-left"> <strong>Header</strong> </span><span class ="glyphicon glyphicon-chevron-down pull-right btn-small" id ="down"> </span></button>
<div class ="row">
<div class ="col-lg-12" >
<p id ="logo" style="background-color:#D9D9D9;"> <a href="#">Logo</a><br/> <a href="#">Skype</a></p>
</div> </div>
</body>
</html>
2 个解决方案
解决方案1
2 2014-12-01 14:31:51
Change this: 更改此：
var $changeicon= $("down");
to this: 对此：
var $changeicon= $("#down");
You've just forget a # sign, and there will be nothing in $changeicon . 您只是忘记了一个#号，并且$changeicon什么也没有。
Update: 更新：
You have also a missing: }); 您还缺少： }); to close the header ready section. 关闭标题准备部分。
So the jQuery should like this: 因此，jQuery应该如下所示：
$(function() {
$("#header").ready(function() {
$("#logo").hide();
$("#header").click(function() {
$("#logo").slideToggle("slow");
});
});
$("#down").click(function() {
var $changeicon = $("#down");
if ($changeicon.hasclass("glyphicon-chevron-down")) {
$changeicon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}
else {
$changeicon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}
});
});
解决方案2
1 已采纳 2014-12-01 14:35:26
In order for your code to work you need to change the following: 为了使代码正常工作，您需要更改以下内容：
jquery click selector -> change
$("#down").click(function()to$("#header").click(function()jQuery单击选择器->将$("#down").click(function()更改$("#header").click(function()the element with id="down" has no size -> to correct this change var
$changeicon= $("down");id =“ down”的元素没有大小->更正此更改var $changeicon= $("down");to$changeicon= $(this).find("#down");到$changeicon= $(this).find("#down");Capital "C" letter in class ->
$changeicon .hasclass("glyphicon-chevron-down")needs to be$changeicon.hasClass("glyphicon-chevron-down")类中的大写字母“ C”-> $changeicon .hasclass("glyphicon-chevron-down")需要为$changeicon.hasClass("glyphicon-chevron-down")
Check working fiddle here 在这里检查工作小提琴
PS. PS。 Learn how to use the browsers' debugger tools ... they're very useful and can save you a lot of time waiting for someone like me to solve your syntax mistakes. 了解如何使用浏览器的调试器工具……它们非常有用，可以为您节省大量时间，以等待像我这样的人解决您的语法错误。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.